/* ==================================================================
   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}
/* grid items default to min-width:auto, so the fixed 300px Turnstile
   widget used to stretch the column past the viewport on small phones */
.contact > *{min-width:0}

.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}
.form-fields > *,.form-row > *{min-width:0}

.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)}

/* Honeypot: off-screen rather than display:none, which some bots know
   to skip. aria-hidden and tabindex="-1" on the markup keep it away
   from keyboard and screen-reader users. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Turnstile renders its own widget; just give it room. */
.cf-turnstile{margin-top:4px}

.form-error{
  padding:10px 14px;border-radius:9px;
  background:#fdeceb;border:1px solid #f6cdc9;color:#b3261e;
  font-size:13.5px;line-height:1.5;
}

.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-group{margin-top:28px}

.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)}

.faq__a ul{margin:0;padding:0 24px 22px;list-style:none}
.faq__a ul li{
  position:relative;padding-left:20px;margin-top:10px;
  font-size:15.5px;line-height:1.6;color:var(--c-text-muted);
}
.faq__a ul li:first-child{margin-top:0}
.faq__a ul li::before{
  content:"";position:absolute;left:2px;top:9px;
  width:5px;height:5px;border-radius:50%;background:var(--c-blue-600);
}


/* ==================================================================
   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)}



/* ==================================================================
   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. ORG CHART
   A fixed-size SVG (connector lines only) with HTML boxes absolutely
   positioned on top, sharing one pixel coordinate space — the lines
   and boxes can never drift apart because neither is computed from
   the other. Below 1000px the diagram doesn't shrink (it would become
   unreadable); a separate vertical-list markup takes over instead,
   built on the same rail technique as the home page's .flow stepper.
   The cutoff is 1048px (1000px canvas + 24px container padding per
   side), so the canvas is never squeezed below its own width.
   Upper boxes are 176×80; the six department boxes on the bottom row
   are 150×80 (smaller font/padding) so all six fit the 1000px canvas.
   Shorter labels just sit centered in the same footprint. */

.org-chart{position:relative;width:1000px;max-width:100%;height:500px;margin:36px auto 0}
.org-chart__svg{position:absolute;inset:0;width:100%;height:100%}
.org-line{stroke:var(--c-blue-200);stroke-width:2}

.org-node{
  position:absolute;width:176px;height:80px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px 14px;border-radius:14px;
  font-size:14px;font-weight:700;line-height:1.3;
}
.org-node--board,.org-node--sub{color:var(--c-on-dark);box-shadow:var(--sh-card-sm)}
.org-node--board{background:var(--g-navy)}
.org-node--sub{background:var(--g-brand)}
.org-node--side{
  background:var(--c-surface);color:var(--c-ink-700);
  border:1px solid var(--c-border-strong);
}

.org-node--yk{left:412px;top:0}
.org-node--uyum{left:40px;top:110px}
.org-node--denetim{left:784px;top:110px}
.org-node--gm{left:412px;top:220px}

.org-node--dept{top:400px;width:150px;padding:10px 8px;font-size:13px}
.org-node--dept-1{left:0}
.org-node--dept-2{left:170px}
.org-node--dept-3{left:340px}
.org-node--dept-4{left:510px}
.org-node--dept-5{left:680px}
.org-node--dept-6{left:850px}

.org-chart-mobile{display:none}


/* ==================================================================
   14. RESPONSIVE
   ================================================================== */

/* 1000px canvas + the 24px container padding on each side = 1048px.
   Below that the canvas would be squeezed by max-width:100% while the
   boxes keep their pixel positions, so lines and boxes drift apart. */
@media (max-width:1048px){
  /* the fixed-coordinate diagram has no room to breathe below this
     width; swap it for a plain vertical list instead of shrinking it
     into illegibility. */
  .org-chart{display:none}
  .org-chart-mobile{
    display:block;position:relative;max-width:360px;margin:32px auto 0;padding-left:30px;
  }
  .org-chart-mobile::before{
    content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
    background:var(--c-blue-200);
  }
  .org-chart-mobile .org-node{
    position:relative;display:flex;width:fit-content;height:auto;margin-bottom:14px;
  }
  .org-chart-mobile .org-node::before{
    content:"";position:absolute;left:-25px;top:50%;transform:translateY(-50%);
    width:10px;height:10px;border-radius:50%;background:var(--c-blue-500);
    border:2px solid var(--c-surface);
  }
  .org-chart-mobile .org-node--side,
  .org-chart-mobile .org-node--sub{margin-left:20px}
}

@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}
}

/* Turnstile's iframe is a fixed 300px; below ~360px the card is narrower
   than that. Scaled rather than clipped so the whole widget (incl. the
   Cloudflare branding) stays visible; the negative margin gives back the
   height the scale frees up. */
@media (max-width:359px){
  .cf-turnstile{transform:scale(.84);transform-origin:left top;margin-bottom:-11px}
}