/* ==================================================================
   icerik.css — content components
   ------------------------------------------------------------------
   Shared building blocks for the inner pages: long-form text, data
   tables, document lists and the PDF viewer. Kept out of style.css so
   the home page (which uses none of them) doesn't pay for them, and
   out of anasayfa.css because several pages share them.

   Requires: colors.css → style.css. Every colour here is a token.
   ================================================================== */


/* ==================================================================
   1. LONG-FORM TEXT
   ================================================================== */

/* ~72 characters is the comfortable reading measure; without it the
   paragraphs would run the full 1240px container. */
.article{max-width:72ch}
.article .prose:first-child{margin-top:0}

.article h2{
  margin:44px 0 0;
  font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink);
}
.article h2:first-child{margin-top:0}

.article h3{
  margin:26px 0 0;
  font-size:18px;font-weight:700;letter-spacing:-.005em;color:var(--c-ink);
}

.article ul{margin:14px 0 0;padding:0;list-style:none}
.article ul li{
  position:relative;padding-left:22px;margin-top:9px;
  font-size:16px;line-height:1.65;color:var(--c-ink-500);
}
.article ul li:first-child{margin-top:0}
.article ul li::before{
  content:"";position:absolute;left:4px;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--c-blue-600);
}


/* ==================================================================
   2. DATA TABLES
   The wrapper scrolls horizontally rather than letting a wide table
   blow out the page — the only approach that survives a 7-column
   table on a 360px screen without hiding data.
   ================================================================== */

.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--c-border);border-radius:16px;
  background:var(--c-surface);
}
.table-wrap + .table-wrap{margin-top:28px}

.data-table{width:100%;border-collapse:collapse;font-size:15px}
/* only the genuinely wide tables force a scroll; 2–3 column ones fit */
.data-table--wide{min-width:840px}
.data-table--mid{min-width:560px}

.data-table th,
.data-table td{padding:14px 18px;text-align:left;vertical-align:middle}

.data-table thead th{
  background:var(--c-surface-tint);
  border-bottom:1px solid var(--c-border);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-blue-400);white-space:nowrap;
}

.data-table tbody td{color:var(--c-ink-600)}
.data-table tbody tr + tr td{border-top:1px solid var(--c-border)}
.data-table tbody tr:hover{background:var(--c-surface-soft)}

/* first column carries the row's identity */
.data-table tbody th{
  border-top:1px solid var(--c-border);
  font-weight:700;color:var(--c-ink);
}
.data-table tbody tr:first-child th{border-top:0}

/* Figures line up only with tabular numerals. Scoped to .data-table so the
   selector outranks `.data-table th,.data-table td{text-align:left}` — an
   unscoped .is-num loses that fight and silently left-aligns. */
.data-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table .is-center{text-align:center}

.data-table tfoot td,
.data-table tfoot th{
  border-top:2px solid var(--c-border-strong);
  background:var(--c-surface-tint);
  font-weight:800;color:var(--c-ink);
}

/* a quiet caption above the table */
.table-title{
  margin:0 0 14px;
  font-size:17px;font-weight:700;color:var(--c-ink);
}
.table-note{margin:12px 0 0;font-size:13.5px;color:var(--c-text-muted)}

/* a second table on the same page — the caption between them means the
   sibling selector above never fires, so space off the caption instead */
.table-wrap + .table-title,
.table-note + .table-title{margin-top:44px}


/* ==================================================================
   3. DOCUMENT LINKS
   ================================================================== */

/* gap stays fixed on hover — .doc-link lives inside table cells, and an
   auto-layout column resizes to whatever its widest content becomes, so a
   growing gap (like .link-arrow uses elsewhere) visibly shifts every
   column in the table the moment the pointer lands on the link. */
.doc-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;color:var(--c-blue-600);
  transition:color .2s;
}
.doc-link:hover{color:var(--c-blue-500)}
.doc-link svg{flex:none}

/* the small red-free PDF badge, in brand tokens */
.doc-badge{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:34px;height:34px;border-radius:9px;
  background:var(--c-blue-50);color:var(--c-blue-600);
}


/* ==================================================================
   4. PDF VIEWER
   ================================================================== */

.pdf-embed{
  width:100%;aspect-ratio:1/1.3;
  border:1px solid var(--c-border);border-radius:16px;overflow:hidden;
  background:var(--c-surface-tint);
}
.pdf-embed iframe{width:100%;height:100%;border:0;display:block}

/* Mobile browsers routinely refuse to render a PDF inline — this is what
   actually shows there instead of a blank frame, not just a fallback. */
.pdf-missing{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;height:100%;padding:32px;text-align:center;
  color:var(--c-text-muted);font-size:15px;
}


/* ==================================================================
   5. BRANCH CARDS
   The top rule is a ::before shared by every card, including --hq:
   hidden at rest, swept in on hover via scaleX.
   ================================================================== */

.branches{gap:24px}

.branch-card{
  position:relative;overflow:hidden;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:20px;padding:30px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.branch-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--g-rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}

.branch-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-card-sm);
  border-color:var(--c-border-strong);
}
.branch-card:hover::before{transform:scaleX(1)}

.branch-card__badge{
  display:inline-block;margin-bottom:14px;padding:5px 12px;border-radius:999px;
  background:var(--c-blue-50);color:var(--c-blue-600);
  font-size:12px;font-weight:700;letter-spacing:.08em;
}
.branch-card__title{margin:0 0 18px;font-size:20px;font-weight:700;color:var(--c-ink)}

.branch-card__row{display:flex;gap:12px;align-items:center;margin-top:12px;color:var(--c-blue-400)}
.branch-card__map{margin-top:20px;font-size:14px}
.branch-card__row--top{align-items:flex-start;margin-top:0}
.branch-card__row--top svg{flex:none;margin-top:2px}
.branch-card__row svg{flex:none}

/* the icon stays faint (decorative); the text next to it needs real contrast */
.branch-card__text{font-size:14.5px;line-height:1.45;color:var(--c-text-muted)}
.branch-card__text--link{font-weight:600;color:var(--c-blue-600)}
.branch-card__text--link:hover{color:var(--c-blue-500)}


/* ==================================================================
   6. CONTACT FORM
   Shared by the home page's bottom section and the dedicated contact
   page. The submit handler that swaps this card for .form-success
   lives in js/site.js, not here — this file is styles only.
   ================================================================== */

.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:stretch}

.contact__lead{
  margin:18px 0 34px;max-width:440px;
  font-size:17px;line-height:1.65;color:var(--c-text-muted);
}

.contact-list{display:grid;gap:22px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.contact-item__icon{
  flex:none;width:48px;height:48px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-blue-50);color:var(--c-blue-600);
}
.contact-item__label{font-size:15px;font-weight:700;color:var(--c-ink)}
.contact-item__value{margin-top:3px;font-size:15px;line-height:1.55;color:var(--c-text-muted)}
.contact-item__link{display:block;margin-top:3px;font-size:15px;font-weight:600}

.form-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:24px;padding:40px;
  box-shadow:var(--sh-form);
}
.form-card__title{margin:0 0 24px;font-size:22px;font-weight:800;color:var(--c-ink)}

.form-fields{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.field{display:block}
.field__label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--c-ink-600)}
.field__input{
  width:100%;padding:14px 16px;
  border:1px solid var(--c-border-field);border-radius:12px;
  background:var(--c-surface-field);
  font-size:15px;outline:none;
  transition:border-color .2s,background .2s;
}
.field__input:focus{border-color:var(--c-blue-600);background:var(--c-surface)}
.field__input--area{resize:vertical}

.consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:var(--c-text-muted);
}
.consent__box{margin-top:3px;width:16px;height:16px;accent-color:var(--c-blue-600)}
.consent a{color:var(--c-blue-600);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--c-blue-500)}

.form-success{text-align:center;padding:40px 10px}
.form-success__icon{
  width:72px;height:72px;border-radius:50%;margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-success-bg);color:var(--c-success-fg);
}
.form-success__title{margin:22px 0 8px;font-size:24px;font-weight:800;color:var(--c-ink)}
.form-success__text{margin:0;font-size:16px;line-height:1.6;color:var(--c-text-muted)}


/* ==================================================================
   7. FAQ ACCORDION
   Two ways to open one, same classes either way:
   - JS-driven (home page): a <div data-faq> + <button class="faq__q">,
     toggled by anasayfa.js adding .is-open and measuring scrollHeight
     into .faq__a's inline max-height.
   - Native (content pages): a <details class="faq"><summary
     class="faq__q">, no JS at all — the browser owns open/close and
     .faq__a just needs to not fight it with a stray max-height:0.
   ================================================================== */

.faq{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:16px;margin-bottom:14px;overflow:hidden;
  transition:border-color .3s;
}
.faq--last{margin-bottom:0}
.faq.is-open,
.faq[open]{border-color:var(--c-blue-100)}

.faq__q{
  width:100%;padding:22px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:none;text-align:left;cursor:pointer;
  font-size:16.5px;font-weight:700;color:var(--c-ink);
  list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__icon{
  flex:none;font-size:26px;font-weight:400;line-height:1;
  color:var(--c-blue-600);transition:transform .3s;
}
.faq.is-open .faq__icon,
.faq[open] .faq__icon{transform:rotate(45deg)}

/* JS mode: pinned to 0 until the runtime sets an inline max-height.
   Native mode: <details> already hides this between summary and </details>,
   so it must NOT also collapse to 0 — .faq:not([data-faq]) targets exactly
   the native case (data-faq is only ever added to the JS markup). */
.faq[data-faq] .faq__a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq__a p{margin:0;padding:0 24px 22px;font-size:15.5px;line-height:1.7;color:var(--c-text-muted)}


/* ==================================================================
   8. NUMBERED PROCESS STEPS
   A static "how it works" list — no auto-advance, no JS. For the
   interactive, auto-advancing version see .flow in anasayfa.css
   (home hero only).
   ================================================================== */

.steps{display:grid;gap:8px}
.step{display:flex;gap:24px;padding-block:22px}
.step + .step{border-top:1px solid var(--c-border)}

.step__num{
  flex:none;width:52px;height:52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:var(--g-brand);color:var(--c-on-dark);
  font-size:18px;font-weight:800;
}
.step__title{margin:0;font-size:18px;font-weight:700;color:var(--c-ink)}
.step__text{margin:6px 0 0;font-size:15.5px;line-height:1.6;color:var(--c-text-muted)}


/* ==================================================================
   9. NUMBERED BENEFIT CARDS
   Same box as .feature-card (anasayfa.css) but headed by a number
   instead of an icon — kept separate rather than forcing one card
   shape to serve two different visual languages.
   ================================================================== */

.benefit-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:22px;padding:32px 28px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.benefit-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-card-sm);
  border-color:var(--c-border-strong);
}
.benefit-card__num{
  font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--c-blue-400);
}
.benefit-card__title{margin:14px 0 0;font-size:18px;font-weight:700;color:var(--c-ink)}
.benefit-card__text{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--c-text-muted)}


/* ==================================================================
   10. AUDIENCE LIST — "kimler yararlanabilir"
   Text-only, no icon/number: the lightest card in the set, for
   sections where the grid itself carries the structure.
   ================================================================== */

.audience-card{
  padding:26px 0;border-top:1px solid var(--c-border);
}
.audience-card__title{margin:0;font-size:17px;font-weight:700;color:var(--c-ink)}
.audience-card__text{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--c-text-muted)}


/* ==================================================================
   11. TYPE CARDS — plain bordered box, title + text only
   ================================================================== */

.type-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:18px;padding:26px 24px;
}
.type-card__title{margin:0;font-size:17px;font-weight:700;color:var(--c-ink)}
.type-card__text{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--c-text-muted)}


/* ==================================================================
   12. CTA BANNER
   ================================================================== */

.cta-banner{
  background:var(--g-navy);
  border-radius:28px;padding:64px 48px;
  text-align:center;color:var(--c-on-dark);
}
.cta-banner .eyebrow{color:var(--c-blue-300)}
.cta-banner__title{
  margin:14px 0 0;font-size:32px;font-weight:800;letter-spacing:-.01em;
  color:var(--c-on-dark);line-height:1.25;
}
.cta-banner__text{
  margin:16px auto 0;max-width:480px;
  font-size:16px;line-height:1.6;color:var(--c-on-dark-strong);
}
.cta-banner .btn{margin-top:28px}


/* ==================================================================
   13. RESPONSIVE
   ================================================================== */

@media (max-width:1000px){
  .contact{grid-template-columns:1fr;gap:44px}
}

@media (max-width:900px){
  .data-table{font-size:14px}
  .data-table th,
  .data-table td{padding:12px 14px}
  .table-wrap{border-radius:14px}

  /* nowrap headers push narrow tables past the viewport and make them
     scroll for no reason; let them wrap. The min-width on --wide/--mid
     still forces a scroll where the data genuinely needs one. */
  .data-table thead th{white-space:normal}

  /* a full-height PDF frame is unusable on a phone; cap it and lean on
     the download button underneath */
  .pdf-embed{aspect-ratio:auto;height:65vh;min-height:380px}

  .article h2{margin-top:34px;font-size:21px}
  .article h3{margin-top:22px;font-size:16.5px}

  .contact{grid-template-columns:1fr;gap:36px}
  .form-row{grid-template-columns:1fr}

  /* 16px is the threshold below which iOS Safari zooms in on focus */
  .form-card{padding:26px 20px;border-radius:18px}
  .field__input{font-size:16px}

  .step{gap:16px;padding-block:18px}
  .step__num{width:44px;height:44px;border-radius:13px;font-size:16px}

  .benefit-card{padding:26px 22px}

  .cta-banner{padding:44px 24px;border-radius:22px}
  .cta-banner__title{font-size:26px}
}

@media (max-width:600px){
  .data-table th,
  .data-table td{padding:11px 12px}
  .doc-link{font-size:14.5px}
  .pdf-embed{height:60vh;min-height:320px}

  .form-card{padding:22px 16px}

  .cta-banner__title{font-size:22px}
}