/* IcePDF Web Araçları — modern hub stili.
   Marka rengi tanıtım sitesiyle (public/index.html) aynı; açık/koyu mod sistem
   temasına göre. Daha ferah tipografi, mesh-gradient hero, arama + kategori
   filtresi, yumuşak renkli gölgeli araç kartları. */
:root{
  color-scheme: light dark;
  --brand:#1d8aa8; --brand-2:#1597bb; --accent:#43c4d8;
  --bg:#F6FBFC; --bg-2:#ffffff; --card:#ffffff; --card-border:#E4EFF3;
  --text:#0F2730; --muted:#5B7480; --heading:#08303D;
  --nav-bg:rgba(255,255,255,.72); --chip:rgba(29,138,168,.10);
  --danger:#d9534f; --ok:#2e9e6b;
  --ring:rgba(29,138,168,.18);
  --shadow-sm:0 2px 8px -3px rgba(6,56,75,.20);
  --shadow:0 22px 48px -26px rgba(6,56,75,.38);
  --radius:20px; --radius-sm:13px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#071419; --bg-2:#0B1F26; --card:#0E242C; --card-border:#1B343E;
    --text:#DCEEF2; --muted:#8DA8B2; --heading:#EAF6F9;
    --nav-bg:rgba(7,20,25,.66); --chip:rgba(67,196,216,.14);
    --ring:rgba(67,196,216,.22);
    --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
    --shadow:0 26px 60px -26px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
.hidden{display:none !important}

/* ── Header (cam) ──────────────────────────────────────── */
header.app-nav{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  background:var(--nav-bg); border-bottom:1px solid var(--card-border);
}
.nav-in{display:flex; align-items:center; gap:14px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--heading); font-size:1.06rem; letter-spacing:-.01em}
.logo img{width:30px; height:30px; border-radius:9px}
.nav-spacer{flex:1}
.nav-links{display:flex; gap:20px; align-items:center}
.nav-links a{color:var(--text); font-weight:600; font-size:.92rem; position:relative}
.nav-links a:hover{color:var(--brand)}
.nav-links a.active{color:var(--brand)}
.nav-links a.active::after{content:''; position:absolute; left:0; right:0; bottom:-21px; height:2px; background:var(--brand); border-radius:2px}
.langToggle{
  border:1px solid var(--card-border); background:transparent; color:var(--text);
  border-radius:10px; padding:7px 12px; font-weight:700; cursor:pointer; font-size:.84rem; transition:.15s;
}
.langToggle:hover{border-color:var(--brand); color:var(--brand)}

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--card-border); background:var(--card); color:var(--text);
  border-radius:12px; padding:11px 18px; font-weight:700; font-size:.95rem;
  cursor:pointer; transition:transform .06s, border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover{border-color:var(--brand)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:none; box-shadow:0 12px 26px -12px var(--brand)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-block{width:100%}
.btn svg{width:18px; height:18px}

/* ── Account chip ─────────────────────────────────────── */
.account{display:flex; align-items:center; gap:10px}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--chip); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:800; overflow:hidden; flex:none;
}
.avatar img{width:100%; height:100%; object-fit:cover}

/* ── HERO (mesh gradient + arama) ─────────────────────── */
.hero{position:relative; overflow:hidden; padding:54px 0 26px}
.hero::before{
  content:''; position:absolute; inset:-40% -10% auto -10%; height:560px; z-index:0;
  background:
    radial-gradient(60% 60% at 18% 12%, rgba(29,138,168,.22), transparent 60%),
    radial-gradient(46% 52% at 88% 8%, rgba(67,196,216,.20), transparent 58%),
    radial-gradient(50% 60% at 60% 100%, rgba(21,151,187,.16), transparent 62%);
  filter:blur(8px); pointer-events:none;
}
.hero .wrap{position:relative; z-index:1; text-align:center}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700;
  color:var(--brand); background:var(--chip); border:1px solid var(--card-border);
  padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.hero .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.hero h1{
  font-size:clamp(1.9rem,5vw,3rem); line-height:1.08; letter-spacing:-.025em;
  color:var(--heading); margin:0 0 12px; font-weight:850;
}
.hero h1 .grad{background:linear-gradient(120deg,var(--brand),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{color:var(--muted); font-size:1.06rem; max-width:600px; margin:0 auto 26px}

.searchbar{
  display:flex; align-items:center; gap:12px; max-width:520px; margin:0 auto;
  background:var(--card); border:1px solid var(--card-border); border-radius:15px;
  padding:13px 18px; box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s;
}
.searchbar:focus-within{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring), var(--shadow)}
.searchbar svg{width:20px; height:20px; color:var(--muted); flex:none}
.searchbar input{flex:1; border:none; background:transparent; color:var(--text); font-size:1rem; outline:none}
.searchbar input::placeholder{color:var(--muted)}

/* ── Hesap / kota şeridi ──────────────────────────────── */
.strip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 0;
  background:var(--bg-2); border:1px solid var(--card-border); border-radius:16px;
  padding:13px 18px; box-shadow:var(--shadow-sm);
}
.strip .pill{display:inline-flex; align-items:center; gap:7px; font-size:.88rem; color:var(--text)}
.strip .pill b{color:var(--heading)}
.strip .spacer{flex:1}
.strip .msg{color:var(--muted); font-size:.92rem}
.strip .msg b{color:var(--heading)}
.badge{font-size:.74rem; font-weight:800; padding:4px 11px; border-radius:999px; background:var(--chip); color:var(--brand)}
.badge.premium{background:linear-gradient(135deg,#26A69A,#00897B); color:#fff}

/* ── Kategori filtre çubuğu ───────────────────────────── */
.filters{display:flex; gap:9px; flex-wrap:wrap; margin:24px 0 16px}
.chip{
  border:1px solid var(--card-border); background:var(--card); color:var(--muted);
  border-radius:999px; padding:8px 16px; font-weight:700; font-size:.86rem; cursor:pointer; transition:.15s;
}
.chip:hover{color:var(--brand); border-color:var(--brand)}
.chip.active{background:var(--heading); color:var(--bg-2); border-color:var(--heading)}

/* ── Araç grid ────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px; padding:4px 0 18px}
.tool{
  position:relative; display:flex; align-items:flex-start; gap:14px; background:var(--card);
  border:1px solid var(--card-border); border-radius:var(--radius); padding:18px;
  cursor:pointer; color:inherit; overflow:hidden;
  transition:transform .14s cubic-bezier(.2,.8,.2,1), border-color .15s, box-shadow .18s;
}
.tool::after{ /* hover'da renkli üst şerit */
  content:''; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0);
  transform-origin:left; background:var(--c,var(--brand)); transition:transform .2s;
}
.tool:hover{transform:translateY(-4px); border-color:transparent; box-shadow:0 26px 44px -24px color-mix(in srgb, var(--c,var(--brand)) 55%, transparent)}
.tool:hover::after{transform:scaleX(1)}
.tool .ic{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .14s}
.tool:hover .ic{transform:scale(1.06)}
.tool .ic svg{width:24px; height:24px}
.tool-body{flex:1; min-width:0}
.tool h3{margin:0 0 3px; font-size:1.02rem; color:var(--heading); letter-spacing:-.01em}
.tool p{margin:0; font-size:.84rem; color:var(--muted)}
.tool .go{
  position:absolute; right:16px; top:50%; transform:translateY(-50%) translateX(6px);
  color:var(--c,var(--brand)); opacity:0; transition:.16s;
}
.tool .go svg{width:20px; height:20px}
.tool:hover .go{opacity:1; transform:translateY(-50%) translateX(0)}
.tool.soon{opacity:.62}
.tool.soon:hover{transform:none; box-shadow:none; border-color:var(--card-border)}
.tool.soon:hover::after{transform:scaleX(0)}
.tool .tag{position:absolute; right:14px; top:14px; font-size:.66rem; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--chip); color:var(--brand)}
.empty{text-align:center; color:var(--muted); padding:48px 0; font-size:.95rem}

/* ── Auth ekranı (giriş gerektiğinde) ─────────────────── */
.auth-wrap{display:flex; justify-content:center; padding:30px 0 50px}
.auth-card{
  width:100%; max-width:430px; background:var(--card); border:1px solid var(--card-border);
  border-radius:24px; padding:32px 30px; box-shadow:var(--shadow); text-align:center;
}
.auth-back{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; font-size:.88rem; margin-bottom:6px; cursor:pointer; background:none; border:none}
.auth-back:hover{color:var(--brand)}
.auth-lock{width:58px; height:58px; border-radius:18px; margin:6px auto 0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--chip),transparent); color:var(--brand); font-size:1.5rem}
.auth-card h1{font-size:1.45rem; color:var(--heading); margin:14px 0 6px; letter-spacing:-.02em}
.auth-card p.sub{color:var(--muted); margin:0 0 22px; font-size:.95rem}
.auth-card .btn{margin-top:10px}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted); margin:18px 0; font-size:.82rem}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--card-border)}
.field{width:100%; margin:8px 0}
.field input{
  width:100%; padding:12px 14px; border:1px solid var(--card-border); border-radius:12px;
  background:var(--bg); color:var(--text); font-size:.95rem; transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.auth-tabs{display:flex; gap:6px; background:var(--bg); border:1px solid var(--card-border);
  border-radius:13px; padding:4px; margin-bottom:14px}
.auth-tabs button{flex:1; border:none; background:transparent; color:var(--muted);
  padding:9px; border-radius:10px; font-weight:700; cursor:pointer; transition:.15s}
.auth-tabs button.active{background:var(--card); color:var(--brand); box-shadow:var(--shadow-sm)}
.link-btn{background:none; border:none; color:var(--brand); cursor:pointer; font-weight:600; font-size:.86rem}
.error{color:var(--danger); font-size:.86rem; margin-top:10px; min-height:1em}

/* ── Footer ───────────────────────────────────────────── */
footer.app-foot{border-top:1px solid var(--card-border); padding:28px 0; color:var(--muted); font-size:.85rem; margin-top:18px}
.foot-in{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.foot-in a{color:var(--muted)} .foot-in a:hover{color:var(--brand)}
.foot-in .spacer{flex:1}

/* ── Toast ────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--heading); color:var(--bg-2); padding:12px 18px; border-radius:13px;
  font-size:.9rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100;
  max-width:90vw; box-shadow:var(--shadow);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--danger); color:#fff} .toast.ok{background:var(--ok); color:#fff}

/* ── Banner (config uyarısı) ──────────────────────────── */
.config-warn{background:#fff3cd; color:#664d03; border-bottom:1px solid #ffe69c;
  padding:10px 16px; text-align:center; font-size:.86rem}
@media (prefers-color-scheme: dark){.config-warn{background:#3a2f00; color:#ffe69c; border-color:#5c4a00}}

/* ── Araç sayfası (merge.html vb.) ────────────────────── */
.tool-main{max-width:760px; padding-top:24px; padding-bottom:48px}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; font-size:.9rem; margin-bottom:14px}
.back-link:hover{color:var(--brand)}
.tool-hero{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.tool-hero .ic{width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex:none}
.tool-hero .ic svg{width:28px; height:28px}
.tool-hero h1{margin:0; font-size:1.55rem; color:var(--heading); letter-spacing:-.02em}
.tool-hero p{margin:2px 0 0; color:var(--muted); font-size:.95rem}

.dropzone{
  border:2px dashed var(--card-border); border-radius:var(--radius); background:var(--bg-2);
  padding:40px 22px; text-align:center; cursor:pointer; transition:.16s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--brand); background:var(--chip)}
.dropzone .dz-ic{width:46px; height:46px; margin:0 auto 12px; color:var(--brand)}
.dropzone .dz-ic svg{width:46px; height:46px}
.dropzone h3{margin:0 0 4px; color:var(--heading); font-size:1.05rem}
.dropzone p{margin:0; color:var(--muted); font-size:.88rem}
.dropzone input[type=file]{display:none}

.file-list{display:flex; flex-direction:column; gap:8px; margin:16px 0}
.file-row{
  display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--card-border);
  border-radius:13px; padding:11px 13px;
}
.file-row .fic{width:34px; height:34px; border-radius:9px; background:var(--chip); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:.7rem; font-weight:800}
.file-row .meta{flex:1; min-width:0}
.file-row .meta b{display:block; color:var(--heading); font-size:.92rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.file-row .meta span{color:var(--muted); font-size:.78rem}
.iconbtn{border:1px solid var(--card-border); background:var(--bg-2); color:var(--muted); width:30px; height:30px;
  border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; transition:.14s}
.iconbtn:hover{border-color:var(--brand); color:var(--brand)}
.iconbtn:disabled{opacity:.35; cursor:default}
.iconbtn.danger:hover{border-color:var(--danger); color:var(--danger)}

.tool-opts{display:flex; flex-direction:column; gap:14px; margin:6px 0 18px}
.tool-opts:empty{display:none}
.opt{display:flex; flex-direction:column; gap:6px}
.opt label{font-weight:600; color:var(--heading); font-size:.9rem}
.opt .hint{color:var(--muted); font-size:.8rem}
.opt input[type=text],.opt input[type=number],.opt select{
  padding:11px 13px; border:1px solid var(--card-border); border-radius:11px; background:var(--bg-2);
  color:var(--text); font-size:.94rem; width:100%}
.opt input:focus,.opt select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{border:1px solid var(--card-border); background:var(--bg-2); color:var(--muted); padding:9px 15px;
  border-radius:10px; font-weight:700; cursor:pointer; font-size:.88rem; transition:.14s}
.seg button.active{background:var(--heading); color:var(--bg-2); border-color:var(--heading)}
.seg button:hover:not(.active){border-color:var(--brand); color:var(--brand)}

.sig-pad{position:relative; border:2px dashed var(--card-border); border-radius:var(--radius); background:var(--bg-2); overflow:hidden}
.sig-pad canvas{display:block; width:100%; height:200px; touch-action:none; cursor:crosshair}
.sig-pad .sig-hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; pointer-events:none}
.sig-pad.has-ink .sig-hint{display:none}
.sig-clear{position:absolute; top:10px; right:10px; z-index:2}

.prog{margin-top:14px}
.prog .bar{height:8px; border-radius:999px; background:var(--card-border); overflow:hidden}
.prog .bar > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .25s}
.prog .lbl{margin-top:8px; color:var(--muted); font-size:.85rem; text-align:center}
.result-card{margin-top:16px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:18px; text-align:center}
.result-card .ok-ic{color:var(--ok); font-size:1.8rem}
.result-card h3{margin:6px 0 4px; color:var(--heading)}
.result-card p{margin:0 0 14px; color:var(--muted); font-size:.9rem}

/* ── Paywall ──────────────────────────────────────────── */
.pay-head{text-align:center; padding:30px 0 6px}
.pay-head h1{font-size:1.8rem; color:var(--heading); margin:0 0 6px; letter-spacing:-.02em}
.pay-head p{color:var(--muted); margin:0}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; padding:22px 0 10px}
.plan{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column}
.plan.featured{border-color:var(--brand); box-shadow:0 22px 48px -28px var(--brand)}
.plan .tagline{font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--brand)}
.plan h3{margin:8px 0 2px; color:var(--heading); font-size:1.2rem}
.plan .price{font-size:2rem; font-weight:850; color:var(--heading); margin:6px 0}
.plan .price small{font-size:.85rem; font-weight:600; color:var(--muted)}
.plan ul{list-style:none; padding:0; margin:12px 0 18px; display:flex; flex-direction:column; gap:8px}
.plan li{color:var(--text); font-size:.9rem; display:flex; gap:8px}
.plan li::before{content:'✓'; color:var(--ok); font-weight:800}
.plan .btn{margin-top:auto}

@media (max-width:560px){
  .nav-links{display:none}
  .hero{padding:38px 0 18px}
  .grid{grid-template-columns:1fr 1fr; gap:12px}
  .tool{flex-direction:column; gap:10px; padding:16px}
  .tool .go{display:none}
  .tool-hero h1{font-size:1.3rem}
}
@media (max-width:380px){ .grid{grid-template-columns:1fr} }