:root{
  --ink:#101426; --muted:#6f7488; --line:#e7eaf5; --bg:#f7f8fc;
  --blue:#2563eb; --indigo:#4f46e5; --violet:#6a3be8; --pink:#ec008c;
  --grad:linear-gradient(90deg,#2643e6 0%,#8a2be2 55%,#ec008c 100%);
  --pad:clamp(12px,4vw,32px);
  --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
a{text-decoration:none;color:inherit}
img,svg,canvas{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}
.page{max-width:960px;margin:0 auto;padding:0 var(--pad);width:100%;flex:1}
/* ================= HEADER ================= */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(16,20,38,.06)}
.header-inner{max-width:960px;margin:0 auto;height:clamp(52px,10vw,96px);display:flex;align-items:center;gap:10px;padding:0 clamp(10px,2vw,14px) 0 var(--pad)}
.logo{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.logo > svg{width:clamp(22px,4vw,34px);height:auto;flex:none}
.logo-text{font-size:clamp(15px,2.6vw,22px);font-weight:800;letter-spacing:-.6px;white-space:nowrap;
 background-image:linear-gradient(115deg,#e8008f 0%,#8a2be2 90%);
 -webkit-background-clip:text;background-clip:text;color:transparent;transition:filter .2s}
.logo-text span{background-image:linear-gradient(115deg,#2563eb 0%,#00a3ff 90%);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.logo:hover .logo-text{filter:brightness(1.18)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;height:clamp(34px,4.5vw,40px);padding:0 clamp(9px,1.8vw,16px);font-size:clamp(11px,1.3vw,12.5px);font-weight:700;border:none;transition:.2s;white-space:nowrap}
.btn svg{flex:none}
.btn-ghost{background:#fff;border:1px solid #e3e6f3;color:#171b34}
.btn-ghost:hover{border-color:#c9cdea;background:#f6f7fd}
.btn-grad{background:linear-gradient(90deg,#8a2be2,#ec008c);color:#fff;box-shadow:0 6px 16px rgba(236,0,140,.25)}
.btn-grad:hover{filter:brightness(1.07)}
/* ================= REKLAM ALANI (full responsive) ================= */
.ad{width:100%;max-width:770px;margin:clamp(10px,2vw,16px) auto 0;background:#eef0f9;border:1px dashed #dcdff0;border-radius:12px;
 display:flex;align-items:center;gap:clamp(10px,2vw,16px);
 padding:clamp(10px,2.2vw,16px) clamp(12px,3vw,24px);
 min-height:clamp(50px,8.5vw,77px);position:relative;overflow:hidden}
.ad-icon{width:clamp(28px,5vw,40px);height:auto;flex:none}
.ad-title{font-size:clamp(12px,1.7vw,13px);font-weight:600;color:#171b34;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-sub{font-size:clamp(9.5px,1.3vw,10.5px);color:#9aa0b5;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-size{margin-left:auto;flex:none;font-size:clamp(9px,1.2vw,10px);font-weight:800;color:#6b5cf6;background:#e2ddfb;border:1px dashed #b7a8f8;border-radius:999px;padding:4px 10px;letter-spacing:.3px;white-space:nowrap}
.ad{display:grid}
.image-page-ad-fallback,.image-page-ad-slot{grid-area:1/1}
.image-page-ad-fallback{display:flex;align-items:center;gap:clamp(10px,2vw,16px);width:100%;min-width:0}
.image-page-ad-slot{display:block!important;width:100%;min-width:0;min-height:clamp(50px,8.5vw,77px);opacity:0;pointer-events:none}
.ad:has(.image-page-ad-slot[data-ad-status="filled"]) .image-page-ad-fallback{visibility:hidden}
.ad:has(.image-page-ad-slot[data-ad-status="filled"]) .image-page-ad-slot{opacity:1;pointer-events:auto}
/* ================= RESİM SAYFASI ================= */
.img-page{padding-top:clamp(12px,3vw,24px);padding-bottom:clamp(18px,3vw,28px);padding-bottom:calc(clamp(18px,3vw,28px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:clamp(10px,1.6vw,12px)}
.img-crumb{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--muted);flex-wrap:wrap;min-width:0}
.img-crumb a{color:#4f46e5;font-weight:700}
.img-crumb svg{color:#9aa0b5;flex:none}
.img-crumb .here{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(240px,60vw)}
.img-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.img-back{display:inline-flex;align-items:center;gap:8px;height:clamp(38px,5vw,40px);padding:0 clamp(10px,1.8vw,14px);border-radius:10px;border:1px solid #e3e6f3;background:#fff;font-size:12px;font-weight:700;color:#171b34;transition:.15s;flex:none}
.img-back:hover{border-color:#c9cdea;background:#f6f7fd}
.img-top .grow{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.img-top h1{font-size:clamp(13px,2.4vw,17px);font-weight:800;overflow-wrap:anywhere}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:800;flex:none}
.chip.v{background:#eef0ff;color:#4f46e5}
.chip.g{background:#e8f9ef;color:#16a34a}
.img-stage{background:#0d1128;border-radius:16px;padding:clamp(8px,2vw,18px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.img-stage img{width:100%;max-height:clamp(240px,62vh,720px);object-fit:contain;border-radius:10px;cursor:zoom-in}
.stage-badge{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(13,17,40,.55);backdrop-filter:blur(6px);color:#fff;font-size:10px;font-weight:800;letter-spacing:.3px}
.stage-badge.l{top:clamp(14px,2.5vw,26px);left:clamp(14px,2.5vw,26px)}
.stage-badge.r{top:clamp(14px,2.5vw,26px);right:clamp(14px,2.5vw,26px);background:rgba(107,59,246,.85)}
.pv-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;min-width:0}
.pv-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:clamp(42px,5.5vw,46px);padding:0 clamp(6px,1.6vw,14px);border-radius:10px;border:1px solid #e3e6f3;background:#fff;font-size:clamp(11px,1.7vw,12.5px);font-weight:700;color:#171b34;transition:.15s;min-width:0}
.pv-btn svg{flex:none}
.pv-btn:hover{border-color:#c9cdea;background:#f6f7fd;transform:translateY(-1px)}
.pv-btn.danger{color:#e11d48}
.pv-btn.danger:hover{border-color:#fecdd3;background:#fff1f2}
.img-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(10px,1.6vw,12px);align-items:stretch}
.panel{background:#fff;border:1px solid #eceef8;border-radius:14px;padding:clamp(12px,2.4vw,18px);display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h3{font-size:11px;font-weight:800;color:#9aa0b5;text-transform:uppercase;letter-spacing:.5px}
.share-flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qr-box{position:relative;flex:none;border:none;background:none;padding:0;border-radius:10px}
.qr-box canvas{width:clamp(60px,9vw,72px);height:clamp(60px,9vw,72px);flex:none;image-rendering:pixelated;border-radius:8px;background:#fff;cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease;border:1px solid #edeff9}
.qr-box:hover canvas,.qr-box:focus-visible canvas{transform:scale(1.06);box-shadow:0 10px 24px rgba(30,40,120,.18)}
.qr-hint{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(106,59,232,.4);pointer-events:none}
.share-circles{display:flex;gap:8px;flex-wrap:wrap}
.sh{width:clamp(38px,5vw,40px);height:clamp(38px,5vw,40px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;border:none;transition:.15s;flex:none}
.sh svg{width:clamp(14px,2vw,16px);height:auto}
.sh:hover{transform:translateY(-2px) scale(1.06)}
.sh.tw{background:#1da1f2}.sh.wa{background:#25d366}.sh.tg{background:#229ed9}.sh.fb{background:#1877f2}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > label{font-size:11.5px;font-weight:700;color:#171b34}
.control{display:flex;align-items:center;gap:8px;border:1px solid #e3e6f3;border-radius:10px;height:clamp(44px,6vw,48px);padding:0 8px 0 14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.control:focus-within{border-color:#8a2be2;box-shadow:0 0 0 4px rgba(138,43,224,.12)}
.control input{flex:1;border:none;outline:none;background:none;font:600 clamp(12px,1.7vw,13px) 'Inter',sans-serif;color:var(--ink);min-width:0}
.copy-btn{flex:none;display:inline-flex;align-items:center;gap:7px;height:clamp(32px,4.5vw,36px);padding:0 clamp(10px,1.6vw,14px);border:none;border-radius:8px;background:var(--grad);color:#fff;font-size:11.5px;font-weight:800;transition:.2s}
.copy-btn:hover{filter:brightness(1.08)}
.format-tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:#eef0fa;border-radius:10px;padding:3px}
.format-tabs button{position:relative;z-index:1;border:none;background:none;padding:clamp(6px,1vw,8px) 0;font-size:clamp(10px,1.4vw,11px);font-weight:800;color:#565b74;border-radius:8px;transition:color .2s;white-space:nowrap}
.format-tabs button.on{color:#fff}
.fmt-pill{position:absolute;top:3px;left:3px;width:calc(33.333% - 3px);height:calc(100% - 6px);border-radius:8px;background:linear-gradient(90deg,#2643e6,#8a2be2);transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.format-tabs.f1 .fmt-pill{transform:translateX(100%)}
.format-tabs.f2 .fmt-pill{transform:translateX(200%)}
.snippet{background:#0d1128;color:#c9e6ff;border-radius:10px;padding:10px 12px;font:600 clamp(9.5px,1.4vw,10.5px)/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-height:70px;overflow:auto;word-break:break-all}
.snippet::-webkit-scrollbar{width:6px;height:6px}
.snippet::-webkit-scrollbar-thumb{background:#3a4067;border-radius:3px}
.meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.meta{background:#fff;border:1px solid #edeff9;border-radius:10px;padding:clamp(8px,1.4vw,10px) 6px;text-align:center;min-width:0}
.meta b{display:block;font-size:clamp(10.5px,1.6vw,12.5px);letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta span{font-size:clamp(8.5px,1.2vw,9.5px);font-weight:700;color:#9aa0b5;text-transform:uppercase;letter-spacing:.4px}
.history h3{font-size:11px;font-weight:800;color:#9aa0b5;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.thumbs::-webkit-scrollbar{height:6px}
.thumbs::-webkit-scrollbar-thumb{background:#d9dcee;border-radius:3px}
.thumb{flex:none;width:clamp(108px,16vw,132px);scroll-snap-align:start;border:1px solid #eceef8;background:#fff;border-radius:12px;overflow:hidden;padding:0;text-align:left;transition:.15s}
.thumb:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,40,120,.12)}
.thumb img{width:100%;height:clamp(64px,9vw,78px);object-fit:cover}
.thumb .t-name{display:block;padding:7px 9px;font-size:10.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb.active{border-color:#8a2be2;box-shadow:0 0 0 3px rgba(138,43,224,.15)}
.next-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.big-btn{display:inline-flex;align-items:center;gap:10px;height:clamp(44px,6vw,50px);padding:0 clamp(16px,3vw,22px);border-radius:999px;font-size:clamp(12px,1.9vw,13.5px);font-weight:800;border:none;transition:.2s}
.big-btn.grad{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(90,50,230,.3)}
.big-btn.grad:hover{filter:brightness(1.07);transform:translateY(-2px)}
.big-btn.ghost{background:#fff;border:1px solid #e3e6f3;color:#171b34}
.big-btn.ghost:hover{border-color:#c9cdea;background:#f6f7fd}
/* lightbox (görsel) */
.lightbox{position:fixed;inset:0;background:rgba(13,17,40,.88);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:80;padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
.lightbox.show{display:flex}
.lightbox img{max-width:min(92vw,900px);max-height:84vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ovl-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:#171b34;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.35)}
/* QR büyütme modalı */
.qr-modal{position:fixed;inset:0;background:rgba(13,17,40,.88);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:85;padding:20px}
.qr-modal.show{display:flex}
.qr-card{background:#fff;border-radius:16px;padding:clamp(16px,4vw,24px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pop .3s cubic-bezier(.3,1.4,.4,1) both;max-width:92vw}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.qr-card canvas{width:clamp(200px,58vw,288px);height:clamp(200px,58vw,288px);image-rendering:pixelated;border-radius:10px;background:#fff;border:1px solid #edeff9}
.qr-card b{font-size:12px;word-break:break-all;max-width:280px}
.qr-card span{font-size:10.5px;color:var(--muted);font-weight:600}
/* ================= FOOTER ================= */
.footer{background:#fff;margin-top:auto;border-top:1px solid #edeff7}
.footer-inner{max-width:960px;margin:0 auto;padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer .copy{font-size:11px;color:#8a8fa8}
.footer-links{margin-left:auto;display:flex;gap:clamp(14px,2.8vw,26px);flex-wrap:wrap}
.footer-links a{font-size:11px;color:#565b74}
.footer-links a:hover{color:var(--indigo)}
.socials{display:flex;gap:18px;margin-left:6px}
.socials a{color:#171b34;display:inline-flex;transition:.15s;padding:4px}
.socials a:hover{color:var(--indigo)}
/* toast */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(120px);background:#171b34;color:#fff;font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:10px;opacity:0;transition:.3s;z-index:99;max-width:92vw;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* =============== KIRILIM NOKTALARI =============== */
@media (min-width:1400px){
  .img-stage img{max-height:70vh}
  .thumb{width:150px}
}
@media (max-width:820px){
  .img-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .meta-grid{grid-template-columns:repeat(2,1fr)}
  .img-stage img{max-height:48vh}
  .pv-btn .pv-lbl{display:none}
  .img-crumb .here{max-width:140px}
  .qr-box canvas{width:72px;height:72px}
  .ad-sub{display:none}
}
@media (max-width:420px){
  .header-right .btn{padding:0 10px}
  .header-right .btn-label{display:none}
  .thumb{width:112px}
  .share-flex{align-items:flex-start}
  .ad{padding:10px 14px;gap:10px}
}
@media (max-width:320px){
  .logo-text{font-size:15px}
  .copy-btn span{display:none}
  .copy-btn{padding:0 12px}
  .img-back .blbl{display:none}
  .img-back{padding:0 12px}
  .chip{padding:3px 8px}
  .qr-box canvas{width:60px;height:60px}
  .sh{width:38px;height:38px}
  .qr-card canvas{width:min(200px,70vw);height:min(200px,70vw)}
  .ad-size{display:none}
  .ad-icon{width:26px}
}
@media (max-width:280px){
  .pv-actions{grid-template-columns:1fr 1fr}
  .meta-grid{grid-template-columns:1fr 1fr}
  .img-top h1{font-size:12.5px}
}
@media (max-height:520px) and (orientation:landscape){
  .header-inner{height:52px}
  .img-page{gap:8px}
  .img-stage img{max-height:52vh}
  .img-grid{grid-template-columns:1fr 1fr}
  .qr-card{flex-direction:row;text-align:left}
  .qr-card canvas{width:min(180px,40vh);height:min(180px,40vh)}
  .ad{min-height:44px}
}
@media (pointer:coarse){
  .control input{font-size:16px}
  .sh{width:44px;height:44px}
  .pv-btn{height:48px}
  .img-back{height:44px}
  .thumb img{height:84px}
  .qr-box canvas{width:76px;height:76px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (hover:none){
  .btn-grad:hover,.big-btn.grad:hover{filter:none;transform:none}
  .logo:hover .logo-text{filter:none}
  .pv-btn:hover,.thumb:hover{transform:none}
}