/* TheToolSet — Minimal Tool Site */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#FCFBF7;
  --text:#1a1a2e;
  --text-light:#64748b;
  --accent:#2563eb;
  --accent-hover:#1d4ed8;
  --border:#e2e8f0;
  --card-bg:#f8fafc;
  --radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-hover:0 4px 12px rgba(0,0,0,.1);
}

html{font-size:16px;line-height:1.6}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.container-narrow{max-width:720px;margin:0 auto;padding:0 1.25rem}

/* Header */
header{border-bottom:1px solid var(--border);padding:.75rem 0;position:sticky;top:0;background:var(--bg);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
.logo-img{height:40px;width:auto;display:block}
.logo-name{margin-left:.5rem;font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:.01em;white-space:nowrap}
@media(max-width:480px){.logo-img{height:34px}.logo-name{font-size:.95rem}}
/* Full logo shown prominently above the page title */
.page-logo{text-align:center;margin:0 0 1.5rem}
.page-logo-img{height:150px;width:auto;display:block;margin:0 auto}
@media(max-width:480px){.page-logo-img{height:118px}}
nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--text-light);font-size:.875rem;transition:color .2s}
nav a:hover{color:var(--accent)}
.search-box{padding:.4rem .75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;width:180px}
/* Mobile hamburger toggle */
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;font-size:1.4rem;line-height:1;background:none;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text);padding:0;flex-shrink:0}
@media(max-width:768px){
  .header-inner{position:relative}
  .nav-toggle{display:inline-flex}
  .search-box{display:none}
  .header-inner nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.25rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-hover);padding:.6rem;margin-top:.5rem;z-index:200}
  .header-inner nav a{padding:.6rem .75rem;border-radius:var(--radius);font-size:.9375rem}
  .header-inner nav a:hover{background:var(--card-bg)}
  .header-inner.nav-open nav{display:flex}
  .nav-toggle[aria-expanded="true"]{background:var(--card-bg)}
}

/* Hero */
.hero{text-align:center;padding:3rem 1rem 2rem}
.hero h1{font-size:2.5rem;font-weight:800;margin-bottom:.5rem}
.hero p{font-size:1.125rem;color:var(--text-light);max-width:500px;margin:0 auto}
@media(max-width:768px){.hero h1{font-size:1.75rem}}

/* Tool Grid */
.section{margin:2rem 0}
.section-title{font-size:1.25rem;font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent);display:inline-block}
.subcat-title{font-size:1rem;font-weight:600;margin:1.25rem 0 .75rem;color:var(--text)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
@media(max-width:768px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tool-grid{grid-template-columns:1fr}}

.tool-card{display:block;padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);transition:all .2s;background:var(--card-bg)}
.tool-card:hover{border-color:var(--accent);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.tool-card .icon{font-size:1.75rem;margin-bottom:.5rem}
.tool-card h3{font-size:.9375rem;font-weight:600;margin-bottom:.25rem}
.tool-card p{font-size:.8125rem;color:var(--text-light);line-height:1.4}

/* Tool Page */
.breadcrumb{font-size:.8125rem;color:var(--text-light);margin-bottom:1rem}
.breadcrumb a{color:var(--text-light);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.tool-page h1{font-size:1.75rem;font-weight:700;margin-bottom:.5rem}
.tool-page .subtitle{color:var(--text-light);margin-bottom:.75rem;font-size:1rem}
.tool-page .intro{color:var(--text);margin-bottom:1.5rem;font-size:1rem;line-height:1.7}

/* Ad slots — real AdSense units */
.ad-slot{margin:1.75rem 0;text-align:center}
.ad-slot .ad-label{display:block;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.62rem;color:var(--text-light);margin-bottom:.4rem}
.ad-slot ins.adsbygoogle{display:block;max-width:100%;margin:0 auto}
/* Leaderboard / responsive — full width, short (top & bottom) */
.ad-slot--leader{min-height:90px;display:flex;align-items:center;justify-content:center}
/* Medium Rectangle ("kockasti") — box in the flow of content */
.ad-slot--box{max-width:336px;margin:2.25rem auto;min-height:280px}
/* In-feed — blends into the related-tools grid as one card */
.ad-slot--infeed{margin:0;border:1px dashed var(--border);border-radius:var(--radius);min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card-bg);padding:.5rem}
/* Legacy placeholder (kept for any page not yet converted) */
.ad-unit{margin:1.5rem 0;padding:1rem;text-align:center;background:var(--card-bg);border:1px dashed var(--border);border-radius:var(--radius);min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--text-light);font-size:.8125rem}
.ad-unit label{font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.7rem}

/* Tool Box */
.tool-box{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin:1.5rem 0}
.tool-box label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem}
.tool-box input,.tool-box select,.tool-box textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;margin-bottom:1rem;font-family:inherit}
.tool-box input:focus,.tool-box select:focus,.tool-box textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.tool-box textarea{min-height:120px;resize:vertical}
.tool-box .row{display:flex;gap:1rem;flex-wrap:wrap}
.tool-box .row>div{flex:1;min-width:140px}

.btn{display:inline-block;padding:.75rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--card-bg);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--border)}

/* Result */
.result{margin-top:1.25rem;padding:1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);font-size:1.125rem;font-weight:600;text-align:center;word-break:break-all}
.result small{display:block;font-weight:400;color:var(--text-light);margin-top:.25rem;font-size:.8125rem}
.qr-empty{display:inline-block;font-size:.9375rem;font-weight:400;color:var(--text-light);max-width:440px;line-height:1.5}

/* About / SEO body */
.about{margin:2rem 0;font-size:.9375rem;line-height:1.7}
.about h2{font-size:1.25rem;font-weight:700;margin-bottom:.75rem}
.about h3{font-size:1.05rem;font-weight:700;margin:1.25rem 0 .5rem}
.about p{margin-bottom:.9rem}
.about ul{margin:.25rem 0 1rem;padding-left:1.25rem}
.about li{margin-bottom:.4rem;color:var(--text-light)}
.about code{background:var(--card-bg);border:1px solid var(--border);border-radius:4px;padding:.1rem .35rem;font-size:.85em}
.about pre{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;overflow:auto;font-size:.8125rem;margin:.5rem 0 1rem}

/* Related Tools */
.related{margin:2rem 0}
.related h2{font-size:1.125rem;font-weight:700;margin-bottom:1rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.related-grid a{display:block;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);font-size:.875rem;text-align:center;transition:border-color .2s}
.related-grid a:hover{border-color:var(--accent);color:var(--accent)}

/* FAQ */
.faq{margin:2rem 0}
.faq h2{font-size:1.125rem;font-weight:700;margin-bottom:1rem}
.faq details{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem;padding:.75rem 1rem}
.faq summary{font-weight:600;cursor:pointer;font-size:.9375rem}
.faq details p{margin-top:.5rem;font-size:.875rem;color:var(--text-light)}

/* Footer */
footer{border-top:1px solid var(--border);padding:2rem 0;margin-top:3rem;text-align:center}
footer a{color:var(--text-light);text-decoration:none;font-size:.875rem;margin:0 .75rem}
footer a:hover{color:var(--accent)}
footer .copy{margin-top:1rem;font-size:.8125rem;color:var(--text-light)}

/* Utilities */
.text-center{text-align:center}
.mt-2{margin-top:1rem}
.mb-2{margin-bottom:1rem}