/* Self-hosted Inter (variable, weights 300-800) */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:block;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:block;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ink:#0e1c2b; --ink-2:#233446; --muted:#64748b; --line:#e3e8ee; --bg:#fcffff; --card:#fff;
  --brand:#0b6b63; --brand-600:#095750; --brand-50:#e8f4f2; --accent:#f2a33a;
  --green:#15803d; --green-bg:#e7f6ec; --amber:#a15c07; --amber-bg:#fdf1dc;
  --red:#b42318; --red-bg:#fdeae8; --blue:#1d4ed8; --blue-bg:#e6edfd; --gray-bg:#eef1f4;
  --radius:12px; --shadow:0 1px 2px rgba(14,28,43,.05),0 4px 14px rgba(14,28,43,.06);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html.fonts-loading body{visibility:hidden}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
.h1,.h2,.h3,.h4,.h5,.h6{margin:0 0 .4em;line-height:1.2;letter-spacing:-.01em;font-weight:700}
.h1{font-size:2.4rem}.h2{font-size:1.6rem}.h3{font-size:1.15rem}.h4{font-size:1rem}
p{margin:0 0 1em}
.muted{color:var(--muted)}.small{font-size:.85rem}.xs{font-size:.78rem}
.container{width:min(1184px,100% - 32px);margin-inline:auto}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
#ownerToggle .icon{transition:transform .15s ease}
#ownerToggle .icon.rot{transform:rotate(180deg)}
.row{display:flex;align-items:center;gap:12px}.row.wrap{flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1}
.stack>*+*{margin-top:16px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;border:1px solid transparent;font:600 .92rem var(--font);cursor:pointer;transition:.15s;text-decoration:none!important;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-600)}
.btn-accent{background:var(--accent);color:#3a2604}.btn-accent:hover{filter:brightness(.95)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}.btn-outline:hover{border-color:#c5ced8;background:#fafbfc}
.btn-ghost{background:transparent;color:var(--ink-2)}.btn-ghost:hover{background:var(--gray-bg)}
.btn-soft{background:var(--brand-50);color:var(--brand-600)}.btn-soft:hover{background:#dcece9}
.btn-danger{background:var(--red-bg);color:var(--red)}.btn-danger:hover{background:#f9d6d2}
.btn-sm{padding:6px 11px;font-size:.82rem;border-radius:8px}
.btn-block{width:100%}
.btn-icon{padding:7px;border-radius:8px}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:6px}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:5px}
.field .hint code{background:var(--gray-bg);padding:1px 5px;border-radius:5px;font-size:.92em}
.co-desc-over,.co-desc-over .co-desc-warn{color:var(--amber);font-weight:600}
/* Real, on request ("iframe eklenen alan ... büyütürken takılarak büyüyor, kasıyor" — the map-embed
   textarea stutters while being dragged larger by its native resize handle). The old blanket
   `transition:.15s` is shorthand for `transition:all .15s` — it was transitioning `height`/`width`
   too, not just the focus-state `border-color`/`box-shadow` it was actually meant for, so every
   native browser resize-drag on a `.textarea` (this one most visibly, being the one field people
   actually resize) fought its own CSS transition instead of tracking the cursor instantly. Scoped
   to just the two properties that ever really change here, `:focus`'s own (see the very next rule)
   — resizing is a native browser interaction, never meant to be eased/transitioned at all. */
.input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,107,99,.15)}
.input[readonly]{background:var(--gray-bg);color:var(--muted);cursor:default}
.input[readonly]:focus{box-shadow:none;border-color:var(--line)}
/* A real disabled `<fieldset>` (e.g. contact.php's form once its own real per-IP rate limit is
   hit) — same visual language as .input[readonly] above, so "you can't use this right now" reads
   consistently across the site. */
fieldset:disabled .input,fieldset:disabled .select,fieldset:disabled .textarea{background:var(--gray-bg);color:var(--muted);cursor:not-allowed}
fieldset:disabled .btn{opacity:.55;cursor:not-allowed}
.textarea{min-height:120px;resize:vertical}
.input-icon{position:relative}.input-icon .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}.input-icon .input{padding-left:38px}
.url-field{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:#fff;transition:.15s;overflow:hidden}
.url-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,107,99,.15)}
.url-field-prefix,.url-field-suffix{display:flex;align-items:center;color:var(--muted);font-size:.9rem;white-space:nowrap;background:var(--gray-bg)}
.url-field-prefix{padding:0 10px 0 12px}
.url-field-suffix{padding:0 12px 0 6px}
.url-field input{flex:1;min-width:0;border:0;border-radius:0;background:transparent;padding:10px 4px}
.url-field input:focus{outline:none;box-shadow:none}
.url-field input[readonly]{background:transparent;color:var(--muted);cursor:default}
/* A real "this exact URL is already taken" state, on request ("URL kısmında kırmızı bir uyarı
   verilsin") — every prior form validation error in this codebase was only ever a generic
   top-of-form alert list; this is the first real per-field red state, used by the company form's
   URL field (both admin and member mode) and the blog form's own URL slug field. */
.url-field.has-error{border-color:var(--red)}
.url-field.has-error:focus-within{box-shadow:0 0 0 3px rgba(180,35,24,.15)}
.field-error{color:var(--red);font-size:.85rem;margin-top:6px;display:flex;align-items:center;gap:6px}
.field-error .icon{width:15px;height:15px;flex:none}
@media(max-width:480px){.url-field-prefix,.url-field-suffix{font-size:.78rem}}
/* About-us rich text editor (companyForm) — hand-rolled contenteditable, no library.
   H1/H2/H3 here produce real <h*> tags on purpose; styled to match the site's usual
   .h1/.h2/.h3 look even though these are genuine elements (see design-system.md). */
.rte{border:1px solid var(--line);border-radius:10px;background:#fff;transition:.15s}
.rte:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,107,99,.15)}
/* Real bug, found and fixed on a real report ("About us kısmını eklerken ... formdaki about us ...
   başlık tablo ekleme alanı taşıyor ... ekranı bu yazılardan dolayı kaydırıyor") — H1/H2/H3/Bold/
   list/align/Table, plus separators, never fit a real narrow mobile width in one row, and this
   had no real wrap/scroll of its own, so the real overflow leaked out of the toolbar and pushed
   the whole real page sideways on mobile (confirmed via a real 375px-width screenshot). Real
   `flex-wrap:wrap` fixes it at the source — the buttons wrap onto a real second line instead of
   overflowing, no horizontal scroll anywhere, same real toolbar everywhere this editor is used
   (add-company.php, company-form.php, blog-form.php). */
.rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px;border-bottom:1px solid var(--line);background:var(--gray-bg);border-radius:10px 10px 0 0}
.rte-btn{min-width:32px;height:30px;padding:0 9px;border:1px solid transparent;border-radius:7px;background:transparent;font:700 .8rem var(--font);color:var(--ink-2);cursor:pointer;transition:.15s}
.rte-btn:hover{background:#fff;border-color:var(--line)}
.rte-btn.active{background:var(--brand-50);border-color:var(--brand);color:var(--brand-600)}
.rte-btn-bold{font-weight:800}
.rte-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.rte-editable{height:260px;min-height:160px;max-height:1000px;overflow-y:auto;resize:vertical;padding:14px;font-size:.94rem;line-height:1.6;color:var(--ink);border-radius:0 0 10px 10px}
.rte-editable:focus{outline:none}
.rte-editable[data-placeholder]:empty::before{content:attr(data-placeholder);color:var(--muted)}
.rte-editable h1{font-size:1.5rem;font-weight:700;margin:0 0 .4em;line-height:1.2}
.rte-editable h2{font-size:1.25rem;font-weight:700;margin:.8em 0 .4em;line-height:1.25}
.rte-editable h3{font-size:1.05rem;font-weight:700;margin:.7em 0 .3em;line-height:1.3}
.rte-editable p{margin:0 0 .8em}
.rte-editable ul,.rte-editable ol{margin:0 0 .8em;padding-left:1.4em}
.rte-editable li{margin-bottom:.2em}
.rte-editable table{border-collapse:collapse;width:100%;margin:0 0 .8em;table-layout:fixed}
.rte-editable table td{border:1px solid var(--line);padding:7px 9px;min-width:40px}
.rte-editable>*:first-child{margin-top:0}
.rte-editable>*:last-child{margin-bottom:0}
/* Icon picker (icon_picker_html() in helpers.php, e.g. admin/taxonomy.php's Add/Edit industry
   forms) — a searchable grid of every real icon, click to select. Fixed-height + scroll so it
   stays a fixed, predictable size in a modal regardless of how many icons exist. */
.icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;max-height:220px;overflow-y:auto;padding:2px}
.icon-picker-btn{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.icon-picker-btn:hover{background:var(--gray-bg);border-color:var(--muted)}
/* Selected state needs to read at a glance across ~70 near-identical small buttons — a light
   tint wasn't enough (reported as "not obvious which one I picked"), so this is now a solid,
   high-contrast fill plus a checkmark badge, not just a border/tint change. */
.icon-picker-btn.active{background:var(--brand);border-color:var(--brand-600);color:#fff;box-shadow:0 0 0 2px var(--brand-50)}
.icon-picker-btn.active::after{content:'';position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:var(--brand-600);border:2px solid #fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:9px 9px;background-repeat:no-repeat;background-position:center}
.icon-picker-btn .icon{width:18px;height:18px}
/* Public company page — the actual rendered "About us" HTML (real h1/h2/h3/b/ul/ol/table tags,
   text-align styles inline from justifyLeft/Center/Right — no <a> ever, see company.php) */
.co-about h1{font-size:1.6rem;font-weight:700;margin:0 0 .5em;line-height:1.2;letter-spacing:-.01em}
.co-about h2{font-size:1.3rem;font-weight:700;margin:1em 0 .5em;line-height:1.25}
.co-about h3{font-size:1.1rem;font-weight:700;margin:1em 0 .4em;line-height:1.3}
.co-about p{margin:0 0 1em;line-height:1.7;color:var(--ink-2)}
.co-about b,.co-about strong{font-weight:700;color:var(--ink)}
.co-about ul,.co-about ol{margin:0 0 1em;padding-left:1.4em;line-height:1.7;color:var(--ink-2)}
.co-about li{margin-bottom:.3em}
.co-about table{border-collapse:collapse;width:100%;margin:0 0 1em}
.co-about table td,.co-about table th{border:1px solid var(--line);padding:9px 12px;line-height:1.5;color:var(--ink-2)}
.co-about>*:first-child{margin-top:0}
.co-about>*:last-child{margin-bottom:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}.check input{margin-top:4px;accent-color:var(--brand)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}.form-grid .full{grid-column:1/-1}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.upload{position:relative;border:2px dashed #cbd5df;border-radius:12px;padding:22px;text-align:center;color:var(--muted);background:#fafbfc;cursor:pointer}
.upload.dragover{border-color:var(--brand);background:var(--brand-50);color:var(--brand-600)}
.upload:hover{border-color:var(--brand);background:var(--brand-50)}
.upload.upload-full{cursor:default}
.upload.upload-full:hover{border-color:#cbd5df;background:#fafbfc}
.gal-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:12px}
.gal-pick-grid:empty{margin-top:0}
.gal-pick-item{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--gray-bg)}
.gal-pick-item img{width:100%;height:100%;object-fit:cover;display:block}
.gal-pick-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(17,24,28,.65);color:#fff;cursor:pointer;padding:0;z-index:1}
.gal-pick-remove:hover{background:var(--red)}
/* Real, on request ("fotoğraf silme iconu da x yuvarlağın ortasında görünmüyor") — the ✕ used to
   rely on `display:flex;align-items:center;justify-content:center` alone to center it inside the
   circle; on an existing (already-saved) photo this button is a real `<label>` wrapping BOTH the
   invisible full-cover `<input type=checkbox>` (the actual real click target) and the ✕ icon
   itself, and that extra real child was enough to throw flex centering off in some real browsers.
   Switched to the more bulletproof real `position:absolute` + `transform:translate(-50%,-50%)`
   pattern instead — centers purely on the icon's own real box, completely independent of
   whatever else shares the circle. */
.gal-pick-remove svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14px;height:14px}
.gal-pick-grid .gal-pick-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal-pick-cover{position:absolute;top:6px;left:6px;background:var(--accent);color:#3a2604;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.02em;text-transform:uppercase}
.gal-pick-remove-check{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.gal-pick-remove:has(.gal-pick-remove-check:checked){background:var(--red)}
.gal-pick-item:has(.gal-pick-remove-check:checked){opacity:.45}
.gal-pick-move{position:absolute;left:6px;right:6px;bottom:6px;display:flex;justify-content:space-between}
.gal-pick-move-btn{width:24px;height:24px;border-radius:50%;border:0;background:rgba(17,24,28,.65);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.gal-pick-move-btn:hover{background:rgba(17,24,28,.85)}
.gal-pick-move-btn .icon{width:13px;height:13px}
.gal-pick-move-btn:not(.gal-pick-move-right) .icon{transform:rotate(90deg)}
.gal-pick-move-btn.gal-pick-move-right .icon{transform:rotate(-90deg)}
.logo-pick-preview{margin-top:12px}
.logo-pick-preview:empty{margin-top:0}
.logo-pick-preview .gal-pick-item{width:120px}
.switch{position:relative;display:inline-block;width:40px;height:23px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#cbd5df;border-radius:99px;transition:.2s;cursor:pointer}
.switch span::before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--brand)}.switch input:checked+span::before{transform:translateX(17px)}
.switch input:disabled+span{opacity:.5;cursor:not-allowed}

/* ---------- Company form (dashboard "Add company" / admin "company-form") ---------- */
.co-form{display:flex;flex-direction:column;gap:28px}
.co-form .alert{margin-bottom:0}
.co-progress-wrap{position:sticky;top:68px;z-index:15;display:flex;align-items:center;gap:10px;background:var(--brand);border-radius:15px;padding:4px}
.co-progress{flex:1;height:20px;background:var(--gray-bg);border-radius:99px;overflow:hidden}
.co-progress-fill{height:100%;background:var(--brand);border-radius:99px;transition:width .25s ease}
.co-progress-label{flex:none;min-width:38px;text-align:right;font-size:.85rem;font-weight:700;color:white;margin-right:10px}
.co-section-head{display:flex;gap:14px;align-items:flex-start;padding:20px 22px 0}
.co-section-ico{width:36px;height:36px;border-radius:9px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none}
.co-section-ico .icon{width:18px;height:18px}
.co-section-head .h3{margin:0 0 3px}
.co-section-head p{margin:0}
.co-section-toggle{width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer;padding-bottom:20px}
.co-section-toggle + .card-body{padding-top:0}
.co-section-chevron{margin-left:auto;flex:none;align-self:center;color:var(--muted);transition:transform .15s ease}
.co-section-chevron.rot{transform:rotate(180deg)}
.co-confirm{padding:2px}
.co-actions{display:flex;justify-content:flex-end;gap:10px}
/* Real honeypot field, on request ("benim dikkat etmediğim güvenlik açığı olur mu" — submit-
   company.php's anonymous form) — real, genuinely off-screen (not display:none/visibility:hidden,
   which some real bots specifically check for and skip filling) so a real simple bot that blindly
   fills every field still trips it, while a real sighted visitor, keyboard user (tabindex="-1"
   skips it) and screen reader (aria-hidden on the wrapper) never encounter it at all. */
.co-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){
  .co-actions{position:sticky;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:14px 16px;margin:0 -16px;z-index:10;box-shadow:0 -6px 20px rgba(14,28,43,.08)}
  .co-actions .btn{flex:1}
}

/* ---------- Cards / badges / misc ---------- */
.card{background:var(--card);border:1px solid #ddd;border-radius:var(--radius);box-shadow:var(--shadow)}
.card-body{padding:22px}.card-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-head .h3{margin:0}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.76rem;font-weight:600;white-space:nowrap}
.b-green{background:var(--green-bg);color:var(--green)}.b-amber{background:var(--amber-bg);color:var(--amber)}.b-red{background:var(--red-bg);color:var(--red)}.b-gray{background:var(--gray-bg);color:var(--ink-2)}.b-blue{background:var(--blue-bg);color:var(--blue)}
/* Ticket status as real colored buttons, on request ("Açık - İşlemde - Tamamlandı seçenekleri
   renkli butonlar halinde görünsün") — the current status is filled/solid, the other two stay
   soft/tinted (same real tokens the .b-* badges above already use — Open blue, In Progress amber,
   Completed green) so it's still obviously a real, clickable choice either way, not just a label. */
.status-btns{display:flex;gap:8px;flex-wrap:wrap}
.status-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;border:1px solid transparent;font:600 .88rem var(--font);cursor:pointer;transition:.15s}
.status-btn[data-status="open"]{background:var(--blue-bg);color:var(--blue)}
.status-btn[data-status="open"].active{background:var(--blue);color:#fff}
.status-btn[data-status="in_progress"]{background:var(--amber-bg);color:var(--amber)}
.status-btn[data-status="in_progress"].active{background:var(--amber);color:#fff}
.status-btn[data-status="closed"]{background:var(--green-bg);color:var(--green)}
.status-btn[data-status="closed"].active{background:var(--green);color:#fff}
.status-btn:not(.active):hover{filter:brightness(.96)}
/* Real, on request ("zaman periyodunu ayarlama kısmını biraz daha kolay kullanılır hale getir
   ... zaman aralıklarını yan yana koy ve butona tıkladığımızda süre değişsin") —
   ad-panelx/analytics.php's period filter, a plain row of real links (immediate navigation on
   click, no dropdown/JS needed) in the same visual language as .status-btn above, just a single
   brand color instead of a per-option meaning (every period is equally "neutral", unlike a
   ticket's open/in-progress/completed). */
.period-btns{display:flex;gap:8px;flex-wrap:wrap}
.period-btn{display:inline-flex;align-items:center;padding:10px 18px;border-radius:10px;font:600 .88rem var(--font);cursor:pointer;transition:.15s;background:var(--brand-50);color:var(--brand-600);text-decoration:none!important}
.period-btn.active{background:var(--brand);color:#fff}
.period-btn:not(.active):hover{filter:brightness(.96)}
/* A small unread-reply dot, on request ("ticket'a cevap geldiğinde ... bildirim ... görünsün") —
   used on both the dashboard's and admin's ticket list rows and on the sidebar nav count badge
   (.count already existed for e.g. "Pending Review"; this is the same real component, just also
   used per-row here). */
.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:middle}
/* A generic "flip this icon horizontally" utility — e.g. reusing the right-pointing `arrow` icon
   as a real "back" icon, same real effect .lb-prev's own icon flip already used, just as a
   standalone class since hydrateIcons() only preserves an <i>'s className across its real
   <i data-i>→<svg> replacement, never an inline style= attribute set on the same element. */
.icon-flip{transform:scaleX(-1)}
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:10px;font-size:.9rem;margin-bottom:18px}
.alert.info{background:var(--blue-bg);color:#1e3a8a}.alert.warn{background:var(--amber-bg);color:#6b3f05}.alert.ok{background:var(--green-bg);color:#14532d}
.logo-mark{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.05rem;flex:none}
.logo-mark.lg{width:76px;height:76px;font-size:1.6rem;border-radius:16px}.logo-mark.sm{width:36px;height:36px;font-size:.85rem;border-radius:9px}

/* Company page header logo slot — a fixed rectangle, not a square, so the layout is identical
   whether the company has a real uploaded logo or falls back to the colour-initials mark. */
.logo-frame{width:200px;height:80px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;justify-content: center;align-items: center;overflow:hidden;flex:none}
.logo-frame img{width:100%;height:100%;object-fit:contain;padding:12px}
.logo-frame-fallback .logo-mark{width:100%;height:100%;border-radius:0;font-size:1.9rem}
.co-head-id{display:flex;align-items:center;gap:20px;flex:1;min-width:260px}
@media(max-width:560px){.co-head-id{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---------- icons.php — internal icon-set reference page ---------- */
.icon-card{padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.icon-card-preview{width:56px;height:56px;border-radius:12px;background:var(--gray-bg);display:grid;place-items:center;color:var(--ink);flex:none}
.icon-card-preview .icon{width:26px;height:26px}
.icon-card-name{font:600 .82rem ui-monospace,Menlo,monospace;color:var(--ink);word-break:break-all}
.icon-card-code{width:100%;margin:0;padding:8px 10px;background:var(--gray-bg);border-radius:8px;font-size:.72rem;overflow-x:auto;text-align:left;cursor:pointer;color:var(--ink-2)}
.icon-card-code:hover{background:#e4e9ee}
.icon-card-svg{width:100%;text-align:left}
.icon-card-svg summary{cursor:pointer;font-size:.72rem;color:var(--muted);list-style:none}
.icon-card-svg summary::-webkit-details-marker{display:none}
.icon-card-svg summary::before{content:"▸ ";display:inline-block}
.icon-card-svg[open] summary::before{content:"▾ "}
.icon-card-svg pre{margin:6px 0 0;padding:8px 10px;background:var(--gray-bg);border-radius:8px;font-size:.68rem;white-space:pre-wrap;word-break:break-all;cursor:pointer;color:var(--ink-2);max-height:160px;overflow-y:auto}
.icon-card-svg pre:hover{background:#e4e9ee}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:99px;font-size:.87rem;color:var(--ink);transition:.15s}
.chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs button{background:none;border:0;padding:10px 16px;font:600 .9rem var(--font);color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.active{color:var(--brand);border-color:var(--brand)}
.tab-panel{display:none}.tab-panel.active{display:block}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:26px}
.pagination a{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-weight:600;font-size:.9rem}
.pagination a.active{background:var(--brand);color:#fff;border-color:var(--brand)}.pagination a:hover{text-decoration:none;border-color:var(--brand)}
.pagination-ellipsis{min-width:38px;height:38px;display:grid;place-items:center;color:var(--muted);font-weight:600}
.card>.pagination{margin:0;padding:16px 22px;border-top:1px solid var(--line)}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:11px 16px;background:#fafbfc;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}.table tbody tr:hover{background:#fafcfc}
.table .actions{display:flex;gap:6px;justify-content:flex-end}
/* Real, reusable "force this onto one line, ellipsis if it doesn't fit" utility — on request
   (ad-panelx/contact-form.php's Message column looked broken, long messages weren't wrapping
   cleanly inside their cell). Needs a width to actually clip against — pair with a max-width,
   same as any other table cell in this codebase already does inline. */
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-co{display:flex;align-items:center;gap:12px;min-width:220px}.cell-co strong{display:block;line-height:1.3}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--line)}
.toolbar .input,.toolbar .select{width:auto;min-width:160px}.toolbar .grow{min-width:220px}

/* ---------- Public header / footer ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:300;font-size:1.8rem;color:var(--ink);letter-spacing:2px}
.brand:hover{text-decoration:none}
.brand i{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;place-items:center;color:#fff}
.brand i .icon{width:19px;height:19px}
.brand em{font-style:normal;color:var(--brand);margin-left:.25em}
.nav{display:flex;gap:6px;align-items:center}
.nav a{padding:8px 13px;border-radius:8px;color:var(--ink-2);font-weight:500;font-size:.92rem}.nav a:hover{background:var(--gray-bg);text-decoration:none}
.nav-toggle{display:none}
@media(max-width:860px){.nav-toggle{display:inline-flex}.nav{display:none}}
.site-footer{background:#0b1622;color:#9fb0c0;margin-top:90px}
.ft-top{border-bottom:1px solid #1a2b3b}
.ft-top .container{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:44px 0}
.ft-top .h3{color:#fff;font-size:1.5rem;margin:0 0 6px;font-weight:600}.ft-top p{margin:0;color:#8ea0b1}
.ft-brand{text-align:center;padding:48px 0 40px;border-bottom:1px solid #1a2b3b}
.ft-main{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;padding:52px 0 52px}
.site-footer .h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 16px;font-weight:600}
.site-footer a:not(.btn){color:#9fb0c0}
.ft-main a:not(.brand){display:block;padding:5px 0;font-size:.92rem}.ft-main a:not(.brand):hover{color:#fff;text-decoration:none}
.ft-more{color:#f2a33a!important;margin-top:6px}
.site-footer .brand{color:#fff;font-size:1.5rem;margin-bottom:16px;display:inline-flex}
.ft-brand .brand{font-size:2.1rem;margin-bottom:22px}
.ft-brand-rule{border:0;border-top:1px solid #1a2b3b;max-width:340px;margin:0 auto 22px}
.ft-social{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ft-main .ft-social a,.ft-brand .ft-social a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #223649;border-radius:99px;font-size:.8rem}
.ft-social a:hover{border-color:#9fb0c0}
.ft-bottom{border-top:1px solid #1a2b3b}
.ft-bottom .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0;font-size:.84rem}
@media(max-width:600px){.ft-main{grid-template-columns:1fr 1fr;gap:32px}.ft-bottom .container{flex-direction:column}}

/* ---------- Home ---------- */
.hero{background:#0d2a52 url(../img/general/hero.jpg) 20% center/cover no-repeat;color:#fff;padding:104px 0 112px;position:relative}
.hero .container{position:relative;z-index:1}
.hero .hero-title{font-size:clamp(2.1rem,5vw,3.4rem);max-width:760px;font-weight:800;line-height:1.15}
.hero .hero-title span{color:var(--accent)}
.hero p.lead{font-size:1.15rem;color:#c5d1dc;max-width:620px;margin:34px 0}
.search-box{background:#2e435f;border-radius:16px;padding:10px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:8px;max-width:1080px;box-shadow:0 20px 50px rgb(0 0 0 / 65%)}
.search-box .input,.search-box .select{border:0;background:#f5f7f9;height:52px;color:var(--ink)}
.search-box .btn{height:52px;padding-inline:28px}
@media(max-width:960px){.search-box{grid-template-columns:1fr 1fr;max-width:640px}.search-box .btn{grid-column:1/-1}}
@media(max-width:560px){.search-box{grid-template-columns:1fr}.search-box .btn{grid-column:auto}}
/* A white vertical divider between each stat, on request — shown on desktop too, not just
   mobile (the user's own suggestion: "bu çizgiyi masaüstü versiyonda da gösterebilirsin"). No
   flex-wrap — the three stats always stay in one row, mobile included (see the @media block
   below for the mobile-specific spacing/type-size that keeps three columns comfortable on a
   narrow phone rather than just shrinking the same desktop sizes down). */
.hero-stats{display:flex;gap:0;margin-top:38px}
.hero-stats>div{padding:0 32px;border-left:1px solid rgba(255,255,255,.28)}
.hero-stats>div:first-child{padding-left:0;border-left:0}
.hero-stats b{display:block;font-size:1.7rem}.hero-stats span{color:#a9b8c6;font-size:.88rem}
@media(max-width:860px){
  /* Real, on request — the hero's own top/bottom padding (104px/112px) was the same at every
     width, a lot of dead vertical space on a phone screen where the content itself doesn't need
     it; cut down here, desktop untouched. */
  .hero{padding:56px 0 40px}
  .hero p.lead{margin:26px 0}
  /* Three stats side by side, not stacked/wrapped — each an equal-width column (flex:1) so they
     stay evenly spaced regardless of label length, centered under its own divider, with smaller
     type than desktop so "Verified businesses" (the longest label) fits two lines without
     crowding its neighbors. */
  .hero-stats{margin-top:26px}
  .hero-stats>div{flex:1;padding:0 10px;text-align:center}
  .hero-stats>div:first-child{padding-left:0}
  .hero-stats b{font-size:1.3rem}
  .hero-stats span{font-size:.7rem;line-height:1.3}
}
.section{padding:64px 0 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px;gap:16px;flex-wrap:wrap}.section-head .h2{margin:0}
.cat-card{display:flex;align-items:center;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);transition:.15s}
.cat-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.cat-card .ico{width:44px;height:44px;border-radius:11px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;border:1px solid #0a6b6347}
.cat-card small{color:var(--muted);display:block}
/* Category cards specifically (`.cat-grid`, on index.php's "Browse by industry" and
   categories.php — not states.php, which reuses .cat-card too but wasn't asked for here) — a
   bigger icon badge everywhere, on request, and a real 2-column tile layout on mobile instead of
   collapsing to one column like every other .g4 grid. */
.cat-grid .cat-card .ico{width:62px;height:62px;border-radius:14pxdisplay:flex;justify-content:center;align-items:center;}
.cat-grid .cat-card .ico .icon{width:39px;height:39px}
@media(max-width:600px){
.cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  /* A vertical tile instead of the desktop's horizontal row — icon on top, name, then the
     company count — centered, on request ("mobilde kutu içeriği ortalı olsun"; the count stays
     plain text, no pill background — "companies sayısı için arka plan kullanma", a direct
     follow-up walking back the pill treatment this section briefly had). */
  .cat-grid .cat-card{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:18px 16px;border-radius:16px}
  .cat-grid .cat-card b{display:block;margin-bottom:5px}
  .cat-grid .cat-card small{font-size:.8rem}
}

/* ---------- Company cards & listing ---------- */
.co-card{padding:20px;display:flex;flex-direction:column;gap:12px;transition:.15s;color:var(--ink)}
.co-card:hover{border-color:#b8d6d2;transform:translateY(-2px);text-decoration:none}
.co-card .h3{margin:0;font-size:1.05rem}.co-card p{margin:0;color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}.co-meta span{display:inline-flex;gap:5px;align-items:center}

/* ---------- Home: "What customers are saying" — 8 most recent reviews, 4-up/2-row grid, same
   card hover treatment as .co-card ---------- */
.mini-review{padding:18px;display:flex;flex-direction:column;gap:10px;transition:.15s;color:var(--ink)}
.mini-review:hover{border-color:#b8d6d2;transform:translateY(-2px);text-decoration:none}
.mini-review-top{display:flex;align-items:center;gap:10px}
.mini-review .av{width:32px;height:32px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
/* Reviewer name + company name, on request ("firma adı ve yorumu yapan kişinin adı da belirli
   bir sınıra kadar görünsün") — both already hard-capped server-side (meta_text(), 20/24 chars)
   so a genuinely long name never reaches the browser at all, but min-width:0 + ellipsis here too
   as a real belt-and-suspenders safety net for whatever that character cap still lets through
   at an unusually narrow card width. flex:1 lets this block take whatever room the fixed-width
   avatar and stars don't need; the stars themselves get flex:none right below so they never get
   squeezed by a long name sitting next to them. */
.mini-review-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mini-review-who b{font-size:.87rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-review-who span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-review-top .stars{flex:none}
.mini-review-top .stars .icon{width:14px;height:14px}
.mini-review-text{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.listing{display:grid;grid-template-columns:290px 1fr;gap:28px;padding-top:32px}
@media(max-width:900px){.listing{grid-template-columns:1fr}}
.filters{padding:20px;align-self:start}
@media(min-width:901px){.filters{position:sticky;top:90px}}
.page-head{background:#0d2a52 url(../img/general/hero.jpg) 60% 58%/cover no-repeat;padding:40px 0;position:relative;color:#fff}
.page-head::before{content:"";position:absolute;inset:0;background:rgba(8,20,38,.46)}
/* Real company-photo-as-background case (company.php) — a real uploaded cover photo can be far
   lighter/busier than the fixed stock hero.jpg, so the real overlay goes a step darker (.46→.65)
   here to keep the real white heading/breadcrumb text readable over it, on request. */
.page-head-cover::before{background:rgba(8,20,38,.65)}
.page-head .container{position:relative}
.page-head .h1{font-size:1.9rem;margin:0;color:#fff}
.page-head .muted{color:#cfdbea}
.crumbs{font-size:.84rem;color:rgba(255,255,255,.8);margin-bottom:8px}.crumbs a{color:rgba(255,255,255,.8)}.crumbs a:hover{color:#fff}
.detail{display:grid;grid-template-columns:1fr 340px;gap:28px;padding-top:30px}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.info-list{list-style:none;margin:0;padding:0}.info-list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem;align-items:flex-start}.info-list li:last-child{border:0}.info-list .icon{color:var(--brand);margin-top:3px}
/* Real map embed (company_map_html()) — renders nothing at all when a company has no real map
   set (see known-gaps.md), no placeholder box standing in for it. */
.map-embed{display:block;width:100%;height:220px;margin-top:14px;border:1px solid var(--line);border-radius:12px}

/* ---------- Auth ---------- */
.auth{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1fr 1fr}
.auth-side{background:var(--ink);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center;background-image:radial-gradient(500px 300px at 100% 0,rgba(242,163,58,.25),transparent 60%),radial-gradient(500px 400px at 0 100%,rgba(11,107,99,.6),transparent 60%)}
.auth-side .h2{font-size:2rem}.auth-side li{margin:10px 0;color:#c5d1dc}.auth-side ul{padding-left:0;list-style:none}
.auth-side li .icon{color:var(--accent);margin-right:8px}
.auth-main{display:grid;place-items:center;padding:40px 20px}
.auth-box{width:min(430px,100%)}
.auth-box .h1{font-size:1.7rem}
@media(max-width:860px){.auth{grid-template-columns:1fr}.auth-side{display:none}}
.code-inputs{display:flex;gap:10px;justify-content:center;margin:20px 0}
.code-inputs input{width:52px;height:60px;text-align:center;font:700 1.5rem var(--font);border:1px solid var(--line);border-radius:12px}
.code-inputs input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,107,99,.15)}
.masked{font:600 1.35rem ui-monospace,Menlo,monospace;letter-spacing:.04em;background:var(--brand-50);color:var(--brand-600);padding:16px;border-radius:12px;text-align:center;margin:16px 0}
.pick-list{display:grid;gap:8px;margin:14px 0}
.pick{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#fff}
.pick:hover,.pick.sel{border-color:var(--brand);background:var(--brand-50)}
.pick input{accent-color:var(--brand)}

/* ---------- App shell (member dashboard + admin) ---------- */
.app{display:grid;grid-template-columns:262px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.sidebar .brand{padding:4px 10px 22px}
.side-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:16px 12px 6px;font-weight:700}
.side-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--ink-2);font-weight:500;font-size:.92rem;margin-bottom:2px}
.side-link:hover{background:var(--gray-bg);text-decoration:none}
.side-link.active{background:var(--brand-50);color:var(--brand-600);font-weight:600}
.side-link .count{margin-left:auto;background:var(--accent);color:#3a2604;border-radius:99px;font-size:.72rem;font-weight:700;padding:1px 8px}
.side-drop{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);padding:16px 12px 6px;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
.side-drop:hover{color:var(--ink-2)}
.side-drop-chevron{width:14px;height:14px;transition:transform .15s ease}
.side-drop-chevron.rot{transform:rotate(180deg)}
.side-drop-children{padding-left:0}
.side-drop-children .side-link{padding-left:22px}
.side-foot{margin-top:auto;padding-top:16px}
/* Real, on request — a plain horizontal rule between the main nav links and "View public
   site"/"Log out" wherever they're moved directly into the real `<nav>` flow (dashboard's own
   sidebar, see dashboard/includes/header.php's own comment) instead of a separate `.side-foot`
   block. Same base-light/dark-flavor override pattern every other real `.side-*` rule in this
   file already uses — var(--line) reads fine on the default light sidebar, overridden to a real
   translucent white below for the dark admin/dashboard flavors, where a plain gray line would be
   nearly invisible against var(--ink)/var(--brand). */
.side-divider{border-top:1px solid var(--line);margin:10px 10px 12px}
/* Real, on request — the admin sidebar's own "View public site"/"Log out" stay pinned to the real
   sidebar bottom on desktop (`.side-foot`, unchanged, untouched), but get a real second copy
   placed inline in the normal `<nav>` flow instead (right after Settings — see
   includes/admin-header.php's own comment) for mobile, same real reasoning/fix as the member
   dashboard sidebar just above. `.side-foot-mobile` is real `display:none` here by default
   (desktop) — the mobile media query below is what actually shows it, and hides `.side-foot` in
   exchange, so only one real copy is ever visible at once. */
.side-foot-mobile{display:none}
.main{min-width:0}
.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20;gap:14px}
.topbar .h1{font-size:1.15rem;margin:0}
.topbar-brand-mobile{display:none;text-transform:uppercase;letter-spacing:1.5px;font-weight:300}
@media(max-width:960px){.topbar-title-desktop{display:none}.topbar-brand-mobile{display:inline}}
.user-chip{display:flex;align-items:center;gap:10px;font-size:.88rem}
.user-chip .av{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.content{padding:28px;max-width:1240px}
.menu-btn{display:none}
.sidebar-backdrop{display:none}
@media(max-width:960px){
  .app{grid-template-columns:1fr}
  /* Real, on request ("mobilde çıkış menüsüne ekranı kaydırıyorum ancak butonu gördükten sonra
     geri aşağı kayıyor ve tıklayamıyorum") — this real `.sidebar` (shared by both the admin panel
     and the member dashboard's own mobile nav) is `bottom:0`-pinned to the viewport, and a real
     mobile browser's own collapsing/expanding address bar genuinely resizes that viewport the
     instant a scroll ends — so the real "Log out" link at the very bottom can shift position right
     as a real tap lands on it. A real, generous `padding-bottom` gives the last real link enough
     breathing room below it that it stays within the real *stable* part of the scrollable area,
     reachable even while the browser chrome is mid-resize, same real fix the user themselves
     suggested ("100px padding verebilirsen sorun çözülür diye tahmin ediyorum"). */
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:60;transform:translateX(-100%);transition:.25s;box-shadow:var(--shadow);padding-bottom:100px}
  .sidebar.open{transform:none}
  .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(8,20,36,.62);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;touch-action:none}
  .sidebar-backdrop.open{opacity:1;visibility:visible;transition-delay:0s}
  .menu-btn{display:inline-flex}
  .topbar,.content{padding-left:16px;padding-right:16px}
  .user-chip .who{display:none}
  /* Real, on request — admin-only (dashboard's own sidebar has no `.side-foot` div left to swap
     with at all, see dashboard/includes/header.php's own comment, so this is deliberately scoped
     to `body.admin`, not every sidebar). Swaps which real copy of "View public site"/"Log out" is
     visible: the real pinned-bottom one hides, the real inline-after-Settings one shows — `flex`/
     `block` picked per real element type so each one's own normal layout (a `.side-link`'s own
     icon+text row vs. a plain `.side-divider` rule) isn't broken by this. */
  body.admin .side-foot{display:none}
  body.admin .side-divider.side-foot-mobile{display:block}
  body.admin a.side-link.side-foot-mobile{display:flex}
}
@media(prefers-reduced-motion:reduce){.sidebar-backdrop{transition:none!important}}
.page-title{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.page-title .h2{margin:0;font-size:1.5rem}
.stat{padding:20px}.stat .lbl{color:var(--muted);font-size:.84rem;display:flex;align-items:center;gap:8px;font-weight:500}
.stat .val{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin-top:4px}.stat .sub{font-size:.8rem;color:var(--muted)}
.stat .ico{width:34px;height:34px;border-radius:9px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:10px}
.bars div{flex:1;background:linear-gradient(to top,var(--brand),#3aa398);border-radius:6px 6px 0 0;position:relative;min-height:6px}
.bars div span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:.72rem;color:var(--muted)}
.bars-wrap{padding-bottom:26px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:10px 14px;font-size:.92rem}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.profile-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.profile-head .av{width:60px;height:60px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.3rem}

/* admin flavour */
body.admin .sidebar{background:var(--ink);border-color:var(--ink)}
body.admin .sidebar .brand{color:#fff}
body.admin .side-link{color:#b8c4d0}body.admin .side-link:hover{background:#1a2c3f}
body.admin .side-link.active{background:var(--brand);color:#fff}
body.admin .side-label{color:#6f8296}
body.admin .side-drop{color:#6f8296}body.admin .side-drop:hover{color:#b8c4d0}
body.admin .side-divider{border-top-color:rgba(255,255,255,.12)}

/* dashboard (member area) flavour — a real brand-green sidebar, on request ("dashboard sidebar
   menü arka planı var(--brand) yani yeşil olsun logo rengi, yazı rengi gibi gerekli renkleri ona
   uygun açık bir renk yapabilirsin"), same real "flavour block" pattern the admin sidebar above
   already established — just var(--brand) instead of var(--ink), and light/white text instead of
   the admin's light-navy-gray, since --brand (#0b6b63) is dark enough for the same real contrast
   reasoning to apply. The active link can't reuse var(--brand) as its own highlight the way the
   admin sidebar does (that IS the sidebar's own background here now) — a translucent white
   overlay instead, the conventional "current item" treatment on a solid-colored sidebar. */
body.dashboard .sidebar{background:var(--brand);border-color:var(--brand)}
body.dashboard .sidebar .brand{color:#fff}
body.dashboard .side-link{color:#cfe8e4}body.dashboard .side-link:hover{background:rgba(255,255,255,.1)}
body.dashboard .side-link.active{background:rgba(255,255,255,.16);color:#fff}
body.dashboard .side-label{color:#8fc3bc}
body.dashboard .side-divider{border-top-color:rgba(255,255,255,.18)}
.perm-table td:first-child{font-weight:600}
.perm-table td,.perm-table th{text-align:center}.perm-table td:first-child,.perm-table th:first-child{text-align:left}
.own-note{background:var(--amber-bg);color:#6b3f05;padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:.9rem}
body:not([data-role=editor_own]) .own-note{display:none}
body[data-role=editor_own] tr.not-own{display:none}

/* ---------- Modal / toast ---------- */
.modal-back{position:fixed;inset:0;background:rgba(14,28,43,.55);display:none;place-items:center;z-index:100;padding:16px}
.modal-back.open{display:grid}
.modal{background:#fff;border-radius:16px;width:min(540px,100%);max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal.wide{width:min(720px,100%)}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head .h3{margin:0}
.modal-body{padding:22px}.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#fafbfc;border-radius:0 0 16px 16px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:13px 18px;border-radius:10px;z-index:200;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;animation:pop .25s}
@keyframes pop{from{transform:translateY(12px);opacity:0}}
[hidden]{display:none!important}

/* Real, on request ("back to top ... ekran 600px aşağı indiğinde sağ alt tarafta yukarı fırlatma
   iconu çıksın") — floating scroll-to-top button, hidden until assets/js/app.js's scroll listener
   adds .is-visible past 600px scrolled. Reuses the shared `arrow` icon (normally right-pointing,
   used on "Browse"-style buttons) rotated -90deg rather than drawing a dedicated up-arrow icon. */
.back-to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;border:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);cursor:pointer;z-index:80;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .2s,transform .2s}
.back-to-top:hover{background:var(--brand-600)}
.back-to-top svg{width:20px;height:20px;transform:rotate(-90deg)}
@media(max-width:600px){.back-to-top{right:14px;bottom:14px;width:42px;height:42px}}

/* hours editor / detail extras */
.hours-edit{display:grid;gap:8px;margin-bottom:16px}
.hours-row{display:grid;grid-template-columns:110px 190px 1fr auto 1fr;gap:10px;align-items:center}
.hours-row .hours-toggle{display:flex;gap:10px;flex-wrap:wrap}
.hours-row [data-hours-time]:disabled{background:var(--gray-bg);color:var(--muted);cursor:not-allowed}
.hours-row.hours-row-closed [data-hours-time],.hours-row.hours-row-closed .muted,.hours-row.hours-row-24h [data-hours-time],.hours-row.hours-row-24h .muted{display:none}
@media(max-width:600px){.hours-row{grid-template-columns:1fr 1fr;row-gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}.hours-row:last-child{border-bottom:0;padding-bottom:0}.hours-row b{grid-column:1/-1}.hours-row .hours-toggle{grid-column:1/-1;margin-bottom:2px}.hours-row .muted{display:none}}
.hours-list{list-style:none;margin:0;padding:0}.hours-list li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.hours-list li:last-child{border:0}.hours-list li.today{font-weight:700;color:var(--brand-600)}.hours-list .closed{color:var(--muted)}
/* Real, on request ("kapak fotoğrafının yanına gelen fotoğraflar orantılı durmuyor ... 4 küçük
   fotoğraf 1. eklenen kapak fotoğrafı ile aynı büyüklükte olsun") — a real cover photo (first
   upload) on the left, up to 4 real small photos filling a same-size block on the right, forced
   to an exact size with `aspect-ratio` + `object-fit:cover` so this never depends on each real
   photo's own real dimensions (any photo gets cropped to fit, never stretched/distorted).
   `.gallery` itself carries a real `aspect-ratio` (company_gallery_html()'s own container, not
   each photo) so the `1fr` row tracks below always have a real, definite height to split between
   them even though no photo's own intrinsic size is used for it — 2:1 makes the cover exactly
   square (half the gallery's real width, the gallery's full real height) and each of the 4 small
   cells exactly square too (a quarter of the cover's real width and half its real height) when
   all 5 real slots are filled; see the `data-count` rules below for 1–4 real photos.
   `data-count` (set server-side by company_gallery_html(), the company's real current photo
   count) is what makes this adaptive — confirmed broken before this fix with a real temporary
   test company (3 real photos: cover + 2 small ones only filled the TOP of that 2×2 block,
   leaving a real, visible empty gap underneath) — the per-count rules below always place every
   real small photo into the full real block with zero dead cells, however many of the 4 slots
   are actually filled. Asked and confirmed directly with the user beforehand (a real side-by-side
   mockup, not guessed) rather than assumed. */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px;aspect-ratio:2/1}
.gal-item{position:relative;border-radius:10px;display:block;background:var(--gray-bg);border:0;padding:0;margin:0;font:inherit;cursor:zoom-in;overflow:hidden}
.gal-item:first-child{grid-column:1/3;grid-row:1/3}
.gal-item:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block}

/* One real photo total — no side column at all, the cover alone fills the whole real width as a
   single wide banner (its own real aspect-ratio, not the 2:1 square-cover ratio above, since
   there's no real small-photo block to stay proportional to here). */
.gallery[data-count="1"]{grid-template-rows:1fr;aspect-ratio:21/9}
.gallery[data-count="1"] .gal-item:first-child{grid-column:1/-1;grid-row:1}

/* Two real photos — the one real side photo fills the ENTIRE real side block (both columns, both
   rows), landing exactly as big as the cover itself: a clean real 50/50 split, not a quarter cell
   with 3/4 of the block sitting empty. */
.gallery[data-count="2"] .gal-item:nth-child(2){grid-column:3/5;grid-row:1/3}

/* Three real photos — the two real side photos split the block into two full-height columns
   (each half the block's real width, the block's full real height), side by side. */
.gallery[data-count="3"] .gal-item:nth-child(2){grid-column:3/4;grid-row:1/3}
.gallery[data-count="3"] .gal-item:nth-child(3){grid-column:4/5;grid-row:1/3}

/* Four real photos — one real wide photo across the top of the block, the other two real photos
   split the bottom half into two square cells. */
.gallery[data-count="4"] .gal-item:nth-child(2){grid-column:3/5;grid-row:1}
.gallery[data-count="4"] .gal-item:nth-child(3){grid-column:3/4;grid-row:2}
.gallery[data-count="4"] .gal-item:nth-child(4){grid-column:4/5;grid-row:2}

/* Five real photos (the real max) — the classic real 2×2 block, each of the 4 real small photos
   its own square quarter-cell. */
.gallery[data-count="5"] .gal-item:nth-child(2){grid-column:3/4;grid-row:1}
.gallery[data-count="5"] .gal-item:nth-child(3){grid-column:4/5;grid-row:1}
.gallery[data-count="5"] .gal-item:nth-child(4){grid-column:3/4;grid-row:2}
.gallery[data-count="5"] .gal-item:nth-child(5){grid-column:4/5;grid-row:2}
.gal-hint{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,20,38,.4);opacity:0;transition:opacity .15s ease}
.gal-hint .icon{width:22px;height:22px;color:#fff}
.gal-item:hover .gal-hint,.gal-item:focus-visible .gal-hint{opacity:1}

/* ---------- Photo lightbox (hand-rolled — no gallery library). .lb is a .modal-back, so the
   shared backdrop-click / [data-close] / Escape / scroll-lock wiring already applies to it. ---------- */
.lb{background:rgba(6,14,26,.95);padding:0}
.lb.open{display:flex;align-items:center;justify-content:center}
.lb-stage{max-width:min(88vw,980px);max-height:78vh;display:grid;place-items:center}
.lb-stage img{max-width:100%;max-height:78vh;border-radius:10px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-ph{width:min(88vw,760px);aspect-ratio:16/10;border-radius:14px;display:grid;place-items:center;gap:14px;color:#fff;text-align:center;padding:24px}
.lb-ph .icon{width:56px;height:56px;opacity:.85}
.lb-ph span{font-size:.95rem;color:rgba(255,255,255,.85);max-width:320px}
.lb-close,.lb-nav{position:absolute;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close{top:18px;right:18px;width:42px;height:42px}
.lb-close .icon{width:20px;height:20px}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px}
.lb-nav .icon{width:22px;height:22px}
.lb-prev{left:18px}.lb-prev .icon{transform:scaleX(-1)}
.lb-next{right:18px}
.lb-foot{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.lb-count{color:rgba(255,255,255,.75);font-size:.82rem;font-weight:600;letter-spacing:.02em}
.lb-thumbs{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:2px}
.lb-thumb{flex:none;width:56px;height:42px;border-radius:7px;border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;opacity:.55;background:#111;transition:opacity .15s ease,border-color .15s ease}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:.85}
.lb-thumb.active{opacity:1;border-color:#fff}
@media(max-width:700px){
  .lb-close{top:10px;right:10px;width:38px;height:38px}
  .lb-nav{width:42px;height:42px}
  .lb-prev{left:8px}.lb-next{right:8px}
  .lb-stage{max-width:94vw}
  .lb-foot{padding:12px 12px 16px}
}
@media(prefers-reduced-motion:reduce){.gal-hint{transition:none!important}}
/* Real, on request, same fix as above — mobile keeps its own real, simpler treatment: every real
   photo (cover included) just stacks full-width in a single real column, same 4:3 shape for all
   of them, no real per-count placement needed at this width. The desktop `data-count` rules above
   all key off real `grid-column`s 3–5, which don't exist in a 1-column real mobile grid, so they're
   explicitly overridden here (real `!important`, not left to cascade order) rather than relying on
   every one of those rules separately losing a specificity fight. */
@media(max-width:600px){
  .gallery{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto;gap:8px}
  .gallery[data-count="1"]{aspect-ratio:auto}
  .gallery .gal-item{grid-column:1!important;grid-row:auto!important;aspect-ratio:4/3}
}
.social{display:flex;gap:8px;flex-wrap:wrap}.social a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:99px;font-size:.84rem;color:var(--ink)}
.social a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.prose .h2{font-size:1.3rem;margin-top:1.6em}.prose .h3{font-size:1.1rem;margin-top:1.5em}.prose p,.prose li{color:var(--ink-2);line-height:1.7}.prose{max-width:760px}

/* ---------- Blog ---------- */
.chip-active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip-active:hover{color:#fff}
.blog-cover{aspect-ratio:16/9;border-radius:var(--radius) var(--radius) 0 0;display:grid;place-items:center;color:rgba(255,255,255,.9)}
.blog-cover .icon{width:34px;height:34px}
.blog-cover-lg{aspect-ratio:21/9;border-radius:var(--radius)}
.blog-cover-lg .icon{width:48px;height:48px}
.blog-card{padding:0;display:flex;flex-direction:column;color:var(--ink);overflow:hidden}
.blog-card:hover{border-color:#b8d6d2;transform:translateY(-2px);text-decoration:none}
.blog-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.blog-card-body .h3{margin:2px 0 0;font-size:1.05rem}
.blog-card-body p{margin:0;color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* mobile refinements */
@media(max-width:700px){
  .hide-sm{display:none!important}
  .site-header .container{gap:8px}
  .brand{font-size:1.6rem}
  .toolbar .input,.toolbar .select{width:100%;min-width:0}
  body.admin .user-chip{display:none}
  .topbar .h1{font-size:1rem}
  .page-title .h2{font-size:1.3rem}
  .card-body{padding:16px}.cta{padding:28px}
}
@media(max-width:480px){.site-header .brand em{display:none}.site-header .btn-primary{padding:9px 12px}}

/* ---------- Mobile menu (side drawer) ---------- */
.hide-md{}
@media(max-width:860px){.hide-md{display:none!important}}
.mm{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s linear .32s}
.mm.open{visibility:visible;transition-delay:0s}
/* page behind an open menu/search stays frozen: html is the scroll container (it has overflow-y:scroll) */
html.mm-open,html.mm-open body{overflow:hidden;overscroll-behavior:none}
html.mm-open{overflow-y:hidden}
.mm-backdrop{touch-action:none;position:absolute;inset:0;background:rgba(8,20,36,.62);opacity:0;transition:opacity .32s ease;cursor:pointer}
.mm.open .mm-backdrop{opacity:1}
.mm-panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,360px);background:#fff;display:flex;flex-direction:column;padding:0 16px;overflow-y:auto;box-shadow:-14px 0 44px rgba(0,0,0,.28);overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.22,.8,.24,1)}
.mm.open .mm-panel{transform:none}
.mm-head{height:69px;margin:0 -16px;padding:0 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex:none}
.mm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 8px;flex:none}
.mm-actions .btn{padding:13px 12px}
.mm-nav{flex:none}
.mm-nav a{display:block;padding:17px 4px;border-bottom:1px solid var(--line);font-size:1.1rem;font-weight:500;color:var(--ink)}
.mm-nav a:hover{text-decoration:none;color:var(--brand)}
.mm-social{position:sticky;bottom:0;margin-top:auto;background:#fff;border-top:1px solid var(--line);padding:18px 0 22px;display:flex;justify-content:center;gap:14px}
.mm-social a{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.mm-social a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.mm-social .icon{width:20px;height:20px}
@media(prefers-reduced-motion:reduce){.mm,.mm-backdrop,.mm-panel{transition:none!important}}
@media(min-width:861px){.mm{display:none!important}}

/* ---------- Mobile search panel ---------- */
@media(max-width:860px){.site-header .row{gap:8px}}
.sp{position:fixed;inset:0;z-index:95;background:#fff;display:flex;flex-direction:column;visibility:hidden;transition:visibility 0s linear .22s}
.sp.open{visibility:visible;transition-delay:0s}
.sp-head{height:69px;padding:0 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex:none}
.sp-form{flex:1;position:relative;margin:0}
.sp-form .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.sp-form input{width:100%;height:40px;padding:0 12px 0 38px;border:1px solid var(--line);border-radius:10px;background:#f5f7f9;font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.sp-form input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(11,107,99,.15)}
.sp-body{overscroll-behavior:contain;flex:1;overflow-y:auto;padding:4px 16px 28px;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.sp.open .sp-body{opacity:1;transform:none;transition-duration:.3s;transition-delay:.05s}
.sp-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:20px 0 8px}
.sp-loading{color:var(--muted);font-size:.9rem;padding:12px 4px}
.sp-item{display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.sp-item:hover{text-decoration:none;background:#fafcfc}
.sp-item b{display:block;line-height:1.3}.sp-item small{color:var(--muted);font-size:.84rem}
.sp-all{margin-top:18px}
@media(prefers-reduced-motion:reduce){.sp,.sp-body{transition:none!important}}
@media(min-width:861px){.sp{display:none!important}}

/* hero photo: keep text readable on small screens (solid tint, no gradient) */
@media(max-width:700px){
  .page-head{background-image:url(../img/general/hero-sm.jpg);background-position:72% 55%}
  .hero::before{content:"";position:absolute;inset:0;background:rgba(8,24,52,.6)}
  .hero{background-position:72% center}
  .hero .container{z-index:1}
}

/* ---------- Home: SEO text section (flat tinted band, editorial two-column layout) ---------- */
.seo{margin-top:0;background:#e8eff8;padding:112px 0}
/* on the home page the SEO band sits flush against the footer */
main:has(> .seo)+.site-footer,main:has(> .auth-center)+.site-footer,main:has(> .auth)+.site-footer{margin-top:0}
.seo-grid{display:grid;grid-template-columns:5fr 7fr;gap:88px;align-items:start}
.seo-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600);margin-bottom:16px}
.seo-eyebrow::before{content:"";width:28px;height:3px;background:var(--accent);border-radius:2px}
.seo .h1{font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.14;font-weight:700;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.seo-lead{font-size:1.06rem;color:var(--ink-2);line-height:1.7;margin-bottom:22px}
.seo-points{list-style:none;padding:0;margin:0 0 28px}
.seo-points li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;color:var(--ink-2);font-weight:500}
.seo-points .icon{color:var(--brand);margin-top:3px}
.seo-blocks{display:grid;grid-template-columns:1fr 1fr;gap:44px 44px;margin-bottom:56px}
.seo-blocks article{border-top:2px solid var(--ink);padding-top:16px}
.seo-num{display:block;font:600 .8rem ui-monospace,Menlo,monospace;color:var(--brand-600);margin-bottom:8px}
.seo-blocks .h2{font-size:1.18rem;line-height:1.3;margin:0 0 10px}
.seo-blocks p,.seo-faq p{color:var(--ink-2);line-height:1.75;font-size:.96rem;margin:0}
.seo a:not(.btn):not(.chip){color:var(--brand-600);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(9,87,80,.35)}
.seo a:not(.btn):not(.chip):hover{text-decoration-color:currentColor}
.seo-sub{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(14,28,43,.16)}
.seo-tags{gap:8px;margin-bottom:56px}
.seo-faq details{border-bottom:1px solid rgba(14,28,43,.16);padding:14px 0}
.seo-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--brand-600);flex:none}
.seo-faq details[open] summary::after{content:"–"}
.seo-faq details p{margin-top:10px}
@media(max-width:1000px){.seo{padding:72px 0 80px}.seo-grid{grid-template-columns:1fr;gap:48px}}
@media(max-width:700px){.seo{margin-top:64px;padding:60px 0 68px}.seo-blocks{grid-template-columns:1fr}}

/* ---------- Home: full-width section bands (flat colours, generous spacing) ---------- */
.band{padding:112px 0}
.band-white{background:#fff}
.band-gray{background:#f5f7f9}
.band-tint{background:#e8f1ef}
.band-cta{padding:112px 0}
.band .section-head{margin-bottom:44px}
.band .grid{gap:24px}
.band-white .cat-card{background:#f7f9fa}
@media(max-width:900px){.band{padding:80px 0}.band-cta{padding:80px 0}.band .section-head{margin-bottom:32px}}
@media(max-width:700px){.band{padding:64px 0}.band-cta{padding:64px 0}}

/* ---------- live-search combobox (home search) ---------- */
.combo{position:relative}
.combo-input{padding-right:64px!important}
.combo::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:rotate(45deg);pointer-events:none}
.combo-clear{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:#dfe5ea;color:#42525f;display:grid;place-items:center;cursor:pointer;padding:0}
.combo-clear .icon{width:12px;height:12px;stroke-width:2.6}
.combo-clear:hover{background:#cfd8de}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(14,28,43,.22);max-height:300px;overflow-y:auto}
.combo-list li{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:.94rem}
.combo-list li .icon{color:var(--muted)}
.combo-list li.active{background:var(--brand-50)}
.combo-list li.chosen{font-weight:600;color:var(--brand-600)}
.combo-list mark{background:none;color:var(--brand-600);font-weight:700}
.combo-list .combo-none{color:var(--muted);cursor:default}
.combo.is-disabled .combo-input{background:var(--gray-bg);color:var(--muted);cursor:not-allowed}
.combo.is-disabled::after{opacity:.4}
/* Real, on request ("industries ... için belirlene iconlar görünsün") — a leading icon in the
   closed/typed state, only for a combo that actually has icon data (Industry); other combos
   (State, City, ...) are completely unaffected, same markup as before. */
.combo.has-icon .combo-input{padding-left:38px}
.combo-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* ---------- companies.php: filter panel ---------- */
.filters-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.filters-head-ico{width:38px;height:38px;border-radius:10px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;flex:none}
.filters-head-ico .icon{width:18px;height:18px}
.filters-head .h3{margin:0 0 3px}
.filters-head p{margin:0}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.chip-x{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 13px;border-radius:99px;background:var(--brand-50);color:var(--brand-600);font-size:.82rem;font-weight:600;line-height:1}
.chip-x:hover{background:#dcece9;text-decoration:none}
.chip-x .icon{width:13px;height:13px;stroke-width:2.4}

/* filters collapse into one compact row on phones */
.filters-toggle{display:none}
.filters-count{background:var(--brand);color:#fff;border-radius:99px;font-size:.72rem;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center}
@media(max-width:900px){
  .filters{padding:0}
  .filters-head{display:none}
  .filters-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:15px 18px;background:none;border:0;border-radius:12px;font:600 .96rem var(--font);color:var(--ink);cursor:pointer;text-align:left}
  .filters-toggle .chev{margin-left:auto;color:var(--muted);transition:transform .25s ease}
  .filters.open .filters-toggle .chev{transform:rotate(180deg)}
  .filters-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
  .filters.open .filters-body{grid-template-rows:1fr}
  .filters-inner{overflow:hidden;min-height:0}
  .filters:not(.open) .filters-inner{visibility:hidden;transition:visibility 0s linear .3s}
  .filters-pad{padding:4px 18px 20px;border-top:1px solid var(--line);padding-top:18px;margin:0 0}
}
@media(prefers-reduced-motion:reduce){.filters-body,.filters-toggle .chev{transition:none!important}}

/* ---------- Page scrollbar: 18px wide, the navy thumb fills the whole 18px (desktop / mouse devices only) ---------- */
@media (hover:hover) and (pointer:fine){
  html::-webkit-scrollbar{width:18px;height:18px}
  html::-webkit-scrollbar-track{background:#dde5f0}
  html::-webkit-scrollbar-thumb{background:#0d2a52;border-radius:3px;min-height:64px}
  html::-webkit-scrollbar-thumb:hover{background:#17427f}
  html::-webkit-scrollbar-thumb:active{background:#0a2043}
  /* Firefox cannot set a pixel width; it gets the same colours */
  @supports (-moz-appearance:none){html{scrollbar-color:#0d2a52 #dde5f0}}
}

/* ---------- Login / register: centered card floating over the hero photo ---------- */
.auth-center{position:relative;min-height:calc(100vh - 69px);display:grid;place-items:center;padding:64px 16px;background:#0d2a52 url(../img/general/hero.jpg) 30% center/cover no-repeat}
.auth-center::before{content:"";position:absolute;inset:0;background:rgba(8,24,52,.5)}
.auth-card{position:relative;width:min(452px,100%);background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(4,14,32,.45)}
.auth-body{padding:40px 40px 34px}
.auth-logo{display:block;margin:0 auto 20px;border-radius:15px;box-shadow:0 8px 20px rgba(14,28,43,.25)}
.auth-card .h1{font-size:1.65rem;text-align:center;margin-bottom:8px}
.auth-body>p.muted{text-align:center;margin-bottom:28px}
.auth-card .input{height:48px}
.auth-card .btn-lg{height:50px;font-size:1rem;margin-top:6px}
.auth-foot{padding:18px 24px;background:#f4f7fa;border-top:1px solid var(--line);text-align:center;font-size:.9rem;color:var(--muted)}
.input-icon:focus-within>.icon{color:var(--brand)}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:8px;padding:0}
.pw-toggle:hover{background:var(--gray-bg);color:var(--ink)}
.input-icon .pw-toggle .icon{position:static;transform:none;color:inherit}
.input-icon:has(.pw-toggle) .input{padding-right:46px}
@media(max-width:480px){.auth-center{padding:28px 14px;align-items:start}.auth-body{padding:30px 22px 26px}}

/* ---------- Home: How it works (centered steps joined by a dashed line) ---------- */
.how-head{text-align:center;max-width:640px;margin:0 auto 72px}
.how-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600);margin-bottom:14px}
.how-eyebrow::before,.how-eyebrow::after{content:"";width:28px;height:3px;background:var(--accent);border-radius:2px}
.how-head .h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:10px}
.how-head p{margin:0;font-size:1.05rem}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.how-step{position:relative;text-align:center;padding:0 8px}
.how-ico{position:relative;width:88px;height:88px;margin:0 auto 26px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;box-shadow:0 0 0 8px #f3f8f7}
.how-ico .icon{width:34px;height:34px;stroke-width:1.8}
.how-num{position:absolute;top:-4px;right:-6px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#3a2604;font-weight:800;font-size:.85rem;display:grid;place-items:center;border:3px solid #fff}
.how-step:not(:last-child)::after{content:"";position:absolute;top:43px;left:calc(50% + 66px);width:calc(100% - 92px);border-top:2px dashed #c5d3e0}
.how-step .h3{font-size:1.2rem;margin-bottom:10px}
.how-step p{margin:0 auto;max-width:300px;color:var(--muted);line-height:1.7}
@media(max-width:900px){.how-grid{grid-template-columns:1fr;gap:52px}.how-step:not(:last-child)::after{display:none}.how-head{margin-bottom:52px}}

/* ---------- About page: "Why we exist" value cards — same icon-circle look as .how-ico, just
   without the numbered badge or the dashed step connector (these are values, not a sequence) ---------- */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.value-step{text-align:center;padding:0 8px}
.value-step .h3{font-size:1.2rem;margin:0 0 10px}
.value-step p{margin:0 auto;max-width:300px;color:var(--muted);line-height:1.7}
@media(max-width:900px){.value-grid{grid-template-columns:1fr;gap:44px}}

/* ---------- Light-background stat row (same shape as .hero-stats, for a band that isn't the dark hero) ---------- */
.stat-row{display:flex;gap:48px;flex-wrap:wrap}
.stat-row b{display:block;font-size:2.2rem;font-weight:800;color:var(--ink);line-height:1.15}
.stat-row span{color:var(--muted);font-size:.9rem}

/* ---------- Home: call-to-action panel (split layout — masked photo left, copy right) ---------- */
.btn-lg{padding:15px 28px;font-size:1rem}
.cta{position:relative;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:56px;display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:20px 56px}
.cta .h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700;margin:0 0 14px;color:var(--ink)}
.cta p{margin:0 0 30px;max-width:460px;font-size:1.08rem;color:var(--ink-2)}
.cta-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.cta-link{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:2px}
.cta-link:hover{text-decoration:none;border-color:var(--ink)}
.cta-points{display:flex;gap:10px 26px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--ink-2)}
.cta-points li{display:inline-flex;align-items:center;gap:8px}
.cta-points .icon{color:var(--brand);width:16px;height:16px;stroke-width:2.6}
/* the masked "cloud" portrait + its ring of business-themed floating badges */
.cta-art{position:relative;display:flex;justify-content:center;padding:20px}
.cta-blob{width:100%;max-width:320px;aspect-ratio:1/1;border-radius:42% 58% 65% 35%/45% 40% 60% 55%;overflow:hidden;box-shadow:0 24px 48px rgba(14,28,43,.18);border:6px solid var(--gray-bg)}
.cta-blob img{width:100%;height:100%;object-fit:cover;display:block}
.cta-badge{position:absolute;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:0 12px 22px rgba(14,28,43,.16);border:1px solid var(--line)}
.cta-badge .icon{width:24px;height:24px;stroke-width:2}
.cta-badge-1{top:6%;left:2%;background:var(--accent);color:#3a2604;border-color:var(--accent);transform:rotate(-9deg)}
.cta-badge-2{top:16%;right:0;transform:rotate(7deg)}
.cta-badge-3{bottom:18%;left:-4%;transform:rotate(11deg)}
.cta-badge-4{bottom:4%;right:6%;background:var(--brand);color:#fff;border-color:var(--brand);transform:rotate(-6deg)}
@media(max-width:900px){.cta{grid-template-columns:1fr;text-align:center;padding:48px 28px}.cta-art{order:-1}.cta p{margin-left:auto;margin-right:auto}.cta-actions{justify-content:center}.cta-points{justify-content:center}}
@media(max-width:700px){.cta{padding:40px 20px;border-radius:20px}.cta-actions{flex-direction:column;gap:18px}.cta-blob{max-width:220px}.cta-badge{width:44px;height:44px;border-radius:13px}.cta-badge .icon{width:20px;height:20px}}

/* ---------- Company page: customer reviews (anonymous: name + 1-5 stars + comment) ---------- */
.stars{display:inline-flex;gap:2px}
.stars .icon{width:16px;height:16px}
.stars-lg .icon{width:20px;height:20px}
.icon-fill{color:var(--accent);fill:var(--accent)}
.icon-off{color:#dbe1e8;fill:none}
.rev-top{font-size:.86rem}
.rev-top .stars .icon{width:14px;height:14px}
.rev-avg{font-size:1.9rem;font-weight:800;line-height:1;color:var(--ink)}
.review-list{list-style:none;margin:0;padding:0}
.review-item{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.review-item:first-child{border-top:0;padding-top:4px}
.review-item .av{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}
.review-item .stars{margin:4px 0 6px}
.review-item p{margin:0;color:var(--ink-2);line-height:1.65;font-size:.94rem}
.review-item.is-new{animation:revIn .4s ease}
@keyframes revIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.review-reply{margin-top:12px;padding:12px 14px;background:var(--brand-50);border-left:3px solid var(--brand);border-radius:0 10px 10px 0}
.review-reply b{color:var(--brand-600)}
.review-reply p{margin:4px 0 0;color:var(--ink-2);line-height:1.6;font-size:.92rem}

/* five-star picker inside the "Write a review" modal */
.star-pick{display:flex;gap:6px}
.star-btn{background:none;border:0;padding:4px;margin:0;cursor:pointer;color:#dbe1e8;line-height:0}
.star-btn .icon{width:28px;height:28px;transition:transform .1s ease}
.star-btn:hover .icon{transform:scale(1.12)}
.star-btn.active{color:var(--accent)}
.star-btn.active .icon{fill:var(--accent)}