/*
Theme Name: Şehap Avukatlık
Theme URI: https://sehaphukuk.com/
Author: Şehap Avukatlık
Description: Şehap Avukatlık & Arabuluculuk Ofisi için özel, bağımsız WordPress teması. Elementor/Astra/page builder bağımlılığı yoktur.
Version: 1.16.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sehap-avukatlik
License: Unlicensed - proprietary, for Şehap Avukatlık & Arabuluculuk Ofisi use only.
*/


  /* ============ Design tokens ============ */
  :root {
    /* 8px spacing scale */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

    /* color: dark petrol, warm broken white, stone, limited bronze — light theme only, by design */
    --bg: #F7F4EE;
    --surface: #FFFFFF;
    --stone: #EFEAE0;
    --ink: #14201C;
    --ink-soft: #4E584F;
    --ink-faint: #7C857C;
    --line: #DFDACC;
    --deep: #0E3B36;
    --deep-ink: #F3F1E9;
    --bronze: #A07A3F;
    --bronze-soft: #F1E9DA;
    --focus: #0E3B36;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-6); }
  @media (max-width: 640px) { .wrap { padding: 0 var(--s-5); } }
  a { color: inherit; }
  img, canvas { max-width: 100%; display: block; }
  ::selection { background: var(--bronze-soft); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  h1, h2, h3, h4 { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }

  .eyebrow {
    font-family: "Public Sans", sans-serif; font-size: 13px; font-weight: 600; color: var(--bronze);
    letter-spacing: 0.03em; margin: 0 0 var(--s-3);
  }

  /* ============ Header ============ */
  header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
  /* NOTE: these elements also carry .wrap — use padding-block, never the
     `padding: X 0` shorthand, or they wipe out .wrap's horizontal padding
     and stick to the viewport edge on narrow screens. */
  .nav { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-4); padding-bottom: var(--s-4); gap: var(--s-5); }
  .brand { display: flex; align-items: baseline; gap: var(--s-2); text-decoration: none; color: var(--ink); }
  .brand .mark { font-family: "Newsreader", serif; font-style: italic; font-size: 22px; color: var(--deep); }
  .brand .name { font-family: "Newsreader", serif; font-size: 17px; letter-spacing: 0.005em; white-space: nowrap; }
  @media (max-width: 460px) { .brand .name { display: none; } }

  .nav-links { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; font-size: 15px; }
  .nav-links a { text-decoration: none; color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); border-color: var(--bronze); }
  @media (max-width: 860px) { .nav-links { display: none; } }

  .nav-right { display: flex; align-items: center; gap: var(--s-5); }
  .lang-text { display: flex; gap: var(--s-2); font-size: 13px; color: var(--ink-faint); }

  /* ---- Dil değiştirici (7 dil) --------------------------------------
     Yedi dil düz satıra sığmadığı için kompakt bir dropdown. Site'nin
     mevcut sakin diliyle uyumlu: çerçevesiz tetikleyici, ince kenarlıklı
     panel, bronz vurgu. Bayrak yok — dil kendi adıyla yazılır. */
  .lang-switch { position: relative; }
  .lang-current {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 4px 2px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; color: var(--ink-soft);
    border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease;
  }
  .lang-current:hover, .lang-current:focus-visible { color: var(--ink); border-color: var(--bronze); }
  .lang-caret { width: 10px; height: 7px; flex-shrink: 0; transition: transform .18s ease; }
  .lang-current .flag, .lang-menu .flag { font-size: 15px; line-height: 1; flex-shrink: 0; }
  .mp-lang .flag { margin-inline-end: 6px; }
  .lang-switch.is-open .lang-caret { transform: rotate(180deg); }
  .lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 148px; margin: 0; padding: var(--s-2) 0; list-style: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
    box-shadow: 0 6px 24px rgba(20, 32, 28, .10);
  }
  .lang-menu li { margin: 0; }
  .lang-menu a {
    display: flex; align-items: center; gap: 8px; padding: 7px var(--s-4); font-size: 14px;
    color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  }
  .lang-menu a:hover, .lang-menu a:focus-visible { background: var(--stone); color: var(--ink); }
  .lang-menu a.is-current { color: var(--deep); font-weight: 600; }
  @media (max-width: 900px) { .lang-switch { display: none; } }
  .lang-text button { background: none; border: none; padding: 2px 3px; cursor: pointer; font: inherit; color: inherit; border-radius: 3px; }
  .lang-text button.active { color: var(--ink); font-weight: 600; }
  .lang-text button:hover { color: var(--ink); }
  .lang-sep { color: var(--line); }
  @media (max-width: 640px) { .lang-text { display: none; } }

  .nav-cta {
    font-size: 14.5px; font-weight: 600; color: var(--deep); text-decoration: none;
    border-bottom: 1px solid var(--deep); padding-bottom: 2px; white-space: nowrap;
  }
  @media (max-width: 640px) { .nav-cta { display: none; } }

  .burger {
    display: none; width: 36px; height: 36px; border: none; background: none; cursor: pointer;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0;
  }
  .burger span { width: 20px; height: 1.5px; background: var(--ink); display: block; transition: transform .2s ease, opacity .2s ease; }
  @media (max-width: 860px) { .burger { display: flex; } }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .mobile-panel {
    display: none; position: fixed; inset: 0; z-index: 60; background: var(--bg);
    padding: var(--s-6) var(--s-5); overflow-y: auto;
  }
  .mobile-panel.open { display: block; }
  .mobile-panel .mp-top { display: flex; justify-content: flex-end; align-items: center; margin-bottom: var(--s-8); }
  .mobile-panel .mp-close { width: 36px; height: 36px; border: none; background: none; cursor: pointer; position: relative; }
  .mobile-panel .mp-close::before, .mobile-panel .mp-close::after {
    content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; background: var(--ink);
  }
  .mobile-panel .mp-close::before { transform: rotate(45deg); }
  .mobile-panel .mp-close::after { transform: rotate(-45deg); }
  .mobile-panel ul { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: flex; flex-direction: column; gap: var(--s-6); }
  .mobile-panel ul a { text-decoration: none; color: var(--ink); font-family: "Newsreader", serif; font-size: 30px; }
  .mobile-panel .mp-lang { display: flex; gap: var(--s-4); font-size: 16px; margin-bottom: var(--s-7); }
  .mobile-panel .mp-lang button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: inherit; cursor: pointer; }
  .mobile-panel .mp-lang button.active { background: var(--deep); color: var(--deep-ink); border-color: var(--deep); }
  .mobile-panel .mp-contact { display: flex; flex-direction: column; gap: var(--s-3); font-size: 16px; }
  .mobile-panel .mp-contact a { text-decoration: none; color: var(--deep); font-weight: 600; }
  body.panel-open { overflow: hidden; }

  /* ============ Hero ============ */
  .hero {
    position: relative; overflow: hidden; min-height: clamp(560px, 68vh, 720px); display: flex;
    background:
      radial-gradient(ellipse 900px 600px at 82% 8%, rgba(160,122,63,0.14) 0%, rgba(160,122,63,0) 60%),
      var(--deep);
  }
  .hero-grid { display: grid; grid-template-columns: 56% 44%; column-gap: var(--s-8); width: 100%; align-self: stretch; }
  .hero-inner {
    position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
    max-width: 480px; padding: var(--s-8) 0; color: var(--deep-ink);
  }
  .hero-visual { position: relative; display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
  .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  /* Soft dissolve into the hero background instead of a hard photo edge.
     The overlay colour is literally the hero background (--deep / #0E3B36),
     so where the gradient reaches full opacity the photo is indistinguishable
     from the background — no visible seam. */
  .hero-visual::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(14,59,54,0) 38%, rgba(14,59,54,0.75) 78%, #0E3B36 100%),
      linear-gradient(to right, #0E3B36 0%, rgba(14,59,54,0) 22%);
  }
  .hero-rule { width: 44px; height: 1px; background: var(--bronze); margin-bottom: var(--s-5); opacity: .8; }
  .hero .eyebrow { color: #D9C79C; margin-bottom: var(--s-4); }
  .hero h1 {
    font-size: clamp(2.1rem, 3.6vw, 2.8rem); line-height: 1.18; max-width: 13ch; margin-bottom: var(--s-5);
  }
  .hero h1 em { font-style: italic; color: #E4D3A6; }
  .hero-lede { font-size: 18px; line-height: 1.6; max-width: 46ch; color: #E4E1D4; margin: 0 0 var(--s-6); }
  .hero-actions { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: var(--s-2); background: var(--deep-ink); color: var(--deep);
    text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 3px;
    transition: background .15s ease;
  }
  .btn-primary:hover { background: #fff; }
  .link-quiet {
    color: #F1EEE3; text-decoration: none; font-weight: 600; font-size: 15px;
    border-bottom: 1px solid rgba(241,238,227,0.45); padding-bottom: 2px;
  }
  .link-quiet:hover { border-color: #F1EEE3; }

  /* ============ Section rhythm ============ */
  section { padding: var(--s-9) 0; }
  section.tight { padding: var(--s-8) 0; }
  section.on-stone { background: var(--stone); }
  section.on-deep { background: var(--deep); color: var(--deep-ink); }
  .section-head { max-width: 640px; margin-bottom: var(--s-7); }
  .section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.25; }
  .section-head p { margin: var(--s-3) 0 0; color: var(--ink-soft); font-size: 17px; max-width: 56ch; }
  section.on-deep .section-head p { color: #C9D3CC; }

  /* ============ WhatsApp band ============ */
  .wa-band { background: #E7EEE8; border-bottom: 1px solid var(--line); }
  .wa-band-inner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
    min-height: 84px; padding-top: var(--s-5); padding-bottom: var(--s-5); flex-wrap: wrap;
  }
  .wa-band-text { display: flex; align-items: center; gap: var(--s-4); font-size: 15.5px; line-height: 1.5; color: #1B4A38; max-width: 560px; }
  .wa-band-icon { width: 26px; height: 26px; color: #1E7A4A; flex-shrink: 0; }
  .wa-band-cta {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600;
    font-size: 15px; color: var(--deep-ink); background: var(--deep); white-space: nowrap;
    padding: 12px 22px; border-radius: 3px; transition: background .15s ease;
  }
  .wa-band-cta:hover { background: #0a2d29; }
  @media (max-width: 640px) {
    .wa-band-inner { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-top: var(--s-5); padding-bottom: var(--s-5); min-height: 0; }
    .wa-band-text { font-size: 15px; max-width: none; }
    .wa-band-cta { align-self: stretch; justify-content: center; min-height: 48px; }
  }

  /* ============ Trust band ============ */
  .trust-band { background: var(--bg); border-bottom: 1px solid var(--line); }
  .trust-line {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6);
    font-size: 15px; color: var(--ink-soft); padding-top: var(--s-5); padding-bottom: var(--s-5);
  }
  .trust-item { padding: 0 var(--s-6) 0 0; border-right: 1px solid var(--line); }
  .trust-item:last-child { border-right: none; padding-right: 0; }
  .trust-line strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 640px) {
    .trust-line { grid-template-columns: 1fr; gap: var(--s-2); padding-top: var(--s-4); padding-bottom: var(--s-4); font-size: 13.5px; }
    .trust-item { border-right: none; padding: 0; }
  }

  /* ============ Problem picker ============ */
  .problems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  @media (max-width: 720px) { .problems { grid-template-columns: 1fr; } }
  .problem {
    background: var(--bg); padding: var(--s-6) var(--s-7); text-decoration: none; color: var(--ink);
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
    font-family: "Newsreader", serif; font-size: 19px; transition: background .15s ease, padding-left .15s ease;
  }
  .problem:hover { background: var(--surface); padding-left: calc(var(--s-7) + 6px); }
  .problem .arrow { font-family: "Public Sans", sans-serif; color: var(--bronze); flex-shrink: 0; font-size: 18px; }

  /* ============ Practice areas: editorial list ============ */
  .areas-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); }
  @media (max-width: 720px) { .areas-list { grid-template-columns: 1fr; } }
  .area-row { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5) 0; border-top: 1px solid var(--line); }
  .area-row img {
    width: 108px; height: 81px; object-fit: cover; border-radius: 2px; flex-shrink: 0; background: var(--stone);
    filter: saturate(0.82) contrast(1.03);
  }
  .area-row h3 { font-size: 18px; margin-bottom: 4px; margin-top: 2px; }
  .area-row p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 42ch; }

  /* ============ Lawyer / about ============ */
  .about-copy p { font-size: 17px; line-height: 1.75; color: var(--ink-soft); max-width: 68ch; margin: 0 0 var(--s-5); }
  .about-copy p:last-child { margin-bottom: 0; }
  .about-intro { margin-bottom: var(--s-8); }

  .lawyers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  @media (max-width: 780px) { .lawyers-grid { grid-template-columns: 1fr; gap: var(--s-7); } }
  /* Photo on the left, name/role/bio beside it. The image is wrapped in an <a>,
     so the anchor is the flex child that must not shrink. */
  .lawyer-figure { margin: 0; display: flex; gap: var(--s-5); align-items: flex-start; }
  .lawyer-figure > a { flex: 0 0 auto; display: block; }
  .lawyer-figure figcaption { flex: 1 1 auto; min-width: 0; }
  .lawyer-figure img {
    width: 190px; max-width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block;
    border-radius: 2px; margin: 0; background: var(--stone);
  }
  .lawyer-figure h3 { font-size: 22px; margin-bottom: 2px; }
  .lawyer-figure .role { font-size: 13.5px; color: var(--bronze); font-weight: 600; margin-bottom: var(--s-3); }
  .lawyer-figure p { margin: 0; color: var(--ink-soft); font-size: 15.5px; max-width: 46ch; }

  /* ============ Foreign clients ============ */
  .intl-box { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
  @media (max-width: 780px) { .intl-box { grid-template-columns: 1fr; } }
  .intl-box h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: var(--s-4); }
  .intl-box p { color: #C9D3CC; font-size: 16.5px; line-height: 1.7; max-width: 50ch; }
  .intl-tags { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .intl-tags span {
    border: 1px solid rgba(243,241,233,0.28); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; color: #E4E1D4;
  }

  /* ============ Publications ============ */
  .pub-featured {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); padding-bottom: var(--s-7);
    margin-bottom: var(--s-7); border-bottom: 1px solid var(--line);
  }
  @media (max-width: 780px) { .pub-featured { grid-template-columns: 1fr; gap: var(--s-5); } }
  .pub-featured .cat { font-size: 13px; font-weight: 600; color: var(--bronze); margin-bottom: var(--s-3); }
  .pub-featured h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; margin-bottom: var(--s-3); }
  .pub-featured p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 56ch; margin: 0 0 var(--s-4); }
  .pub-featured a.readmore { font-weight: 600; color: var(--deep); text-decoration: none; border-bottom: 1px solid var(--deep); padding-bottom: 2px; font-size: 15px; }
  .pub-side { border-left: 1px solid var(--line); padding-left: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
  @media (max-width: 780px) { .pub-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-5); } }
  .pub-side .cat { font-size: 12px; font-weight: 600; color: var(--bronze); margin-bottom: 4px; }
  .pub-side h4 { font-size: 16.5px; font-family: "Newsreader", serif; font-weight: 600; line-height: 1.35; margin: 0; }
  .pub-side a { text-decoration: none; color: var(--ink); }
  .pub-side a:hover h4 { text-decoration: underline; text-decoration-color: var(--bronze); }

  .pub-list { margin-top: var(--s-2); }
  .pub-list summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--deep); list-style: none; }
  .pub-list summary::-webkit-details-marker { display: none; }
  .pub-list summary::after { content: " →"; }
  .pub-list[open] summary::after { content: ""; }
  .pub-list-items { margin-top: var(--s-5); display: flex; flex-direction: column; }
  .pub-list-items a {
    display: flex; justify-content: space-between; gap: var(--s-4); text-decoration: none; color: var(--ink);
    padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: 15.5px;
  }
  .pub-list-items a span.c { color: var(--ink-faint); font-size: 13px; white-space: nowrap; padding-top: 2px; }

  /* ============ Contact ============ */
  .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-9); }
  @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); } }
  .contact-list { display: flex; flex-direction: column; gap: var(--s-5); }
  .contact-item .l { font-size: 13px; color: var(--ink-faint); margin-bottom: 3px; }
  .contact-item .v { font-size: 17px; }
  .contact-item a { text-decoration: none; color: var(--deep); font-weight: 600; }
  .contact-item a.map-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
  .privacy-note { font-size: 13px; color: var(--ink-faint); margin-top: var(--s-3); max-width: 42ch; }

  form.cform { display: flex; flex-direction: column; gap: var(--s-4); }
  form.cform label { font-size: 13.5px; color: var(--ink-soft); margin-bottom: var(--s-1); display: block; }
  form.cform input, form.cform textarea {
    width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 4px;
    padding: 13px 14px; font-family: "Public Sans", sans-serif; font-size: 16px; color: var(--ink);
  }
  form.cform textarea { min-height: 110px; resize: vertical; }
  form.cform input:focus, form.cform textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
  form.cform button {
    align-self: flex-start; background: var(--deep); color: var(--deep-ink); border: none;
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 15.5px; padding: 12px 26px 12px 14px; border-radius: 4px; cursor: pointer;
    min-height: 48px;
  }
  form.cform button:hover { background: #0A2C28; }
  form.cform button:disabled { opacity: .55; cursor: not-allowed; }

  /* WhatsApp mark: a filled disc so the glyph reads at 24px without shouting.
     On the dark button the disc is the paper colour; on the light contact list
     it inverts to deep green. Never WhatsApp's own bright green. */
  .wa-dot {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 24px; height: 24px; border-radius: 999px;
  }
  .wa-dot-glyph { width: 15px; height: 15px; display: block; }
  form.cform .wa-dot-btn { background: var(--deep-ink); color: var(--deep); }
  form.cform button:hover .wa-dot-btn { background: #fff; }
  .contact-item a.wa-inline { display: inline-flex; align-items: center; gap: 9px; }
  .contact-item a.wa-inline .wa-dot { background: var(--deep); color: var(--deep-ink); width: 22px; height: 22px; }
  .contact-item a.wa-inline .wa-dot-glyph { width: 13.5px; height: 13.5px; }
  .contact-item a.wa-inline:hover .wa-dot { background: #0A2C28; }
  .form-note { font-size: 13px; color: var(--ink-faint); margin-top: var(--s-2); }
  .consent-row { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
  /* Must out-specify `form.cform input` (which sets width:100% + padding and,
     on mobile, min-height:48px) — otherwise the KVKK checkbox renders as a
     full-width padded box instead of a checkbox. */
  form.cform .consent-row input[type="checkbox"] {
    width: 18px; height: 18px; min-height: 0; padding: 0; margin-top: 2px;
    flex-shrink: 0; accent-color: var(--deep);
  }
  .form-lead { font-size: 13px; color: var(--ink-faint); margin: 0 0 var(--s-1); }
  .consent-note { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
  .form-disclaimer {
    font-size: 12px; line-height: 1.5; color: var(--ink-faint);
    margin: var(--s-2) 0 0; max-width: 52ch;
  }
  form.cform input.is-invalid, form.cform textarea.is-invalid { border-color: #8A2E2E; }
  form.cform .consent-row input[type="checkbox"].is-invalid { outline: 2px solid #8A2E2E; outline-offset: 2px; }
  .form-status { font-size: 14px; margin: 0; min-height: 1.4em; }
  .form-status[data-state="ok"] { color: #1E5C39; }
  .form-status[data-state="err"] { color: #8A2E2E; }
  .form-status[data-state="sending"] { color: var(--ink-faint); }

  /* ============ Footer ============ */
  footer { background: var(--deep); color: var(--deep-ink); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-8); padding: var(--s-8) 0 var(--s-6); }
  @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
  .footer-brand { font-family: "Newsreader", serif; font-size: 20px; margin-bottom: var(--s-3); }
  .footer-col p { margin: 0 0 var(--s-2); font-size: 14.5px; color: #C9D3CC; }
  .footer-col a { color: #C9D3CC; text-decoration: none; }
  .footer-col a:hover { color: #fff; }
  .footer-col h5 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #8FA098; margin: 0 0 var(--s-4); font-family: "Public Sans", sans-serif; font-weight: 600; }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
  .footer-bottom {
    border-top: 1px solid rgba(243,241,233,0.14); padding: var(--s-5) 0; display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s-3); font-size: 13px; color: #8FA098;
  }


  /* ============ Article modal (in-page reading, no off-site links) ============ */
  .article-modal {
    display: none; position: fixed; inset: 0; z-index: 70; background: rgba(20,32,28,0.55);
    padding: var(--s-5);
  }
  .article-modal.open { display: flex; align-items: flex-start; justify-content: center; }
  .article-panel {
    background: var(--bg); max-width: 760px; width: 100%; max-height: 88vh; overflow-y: auto;
    border-radius: 6px; padding: var(--s-7) var(--s-7) var(--s-8); margin-top: var(--s-6); position: relative;
  }
  @media (max-width: 640px) { .article-panel { padding: var(--s-6) var(--s-5) var(--s-7); max-height: 92vh; } }
  .article-close {
    position: sticky; top: 0; float: right; width: 36px; height: 36px; border: none; background: var(--stone);
    border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--ink); margin-left: var(--s-4);
  }
  .article-cat { font-size: 13px; font-weight: 600; color: var(--bronze); margin-bottom: var(--s-3); }
  .article-title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; margin-bottom: var(--s-6); max-width: 26ch; }
  .article-body { font-size: 17px; line-height: 1.75; color: var(--ink-soft); max-width: 68ch; }
  .article-body h4 { font-family: "Newsreader", serif; font-size: 19px; color: var(--ink); margin: var(--s-6) 0 var(--s-3); }
  .article-body p { margin: 0 0 var(--s-4); }
  .article-body blockquote { margin: var(--s-4) 0; padding: var(--s-3) var(--s-5); border-left: 2px solid var(--bronze); background: var(--stone); font-style: italic; }
  .article-body ul { margin: 0 0 var(--s-4); padding-left: 1.2em; }
  .article-pending {
    margin-top: var(--s-5); padding: var(--s-5); background: var(--stone); border-radius: 4px;
    font-size: 14.5px; color: var(--ink-soft);
  }
  .article-lang-note { font-size: 13px; color: var(--ink-faint); margin-bottom: var(--s-5); }

  /* ============ Help modal (problem picker → topic panel) ============ */
  .help-modal {
    display: none; position: fixed; inset: 0; z-index: 75; background: rgba(20,32,28,0.55);
    padding: var(--s-5);
  }
  .help-modal.open { display: flex; align-items: flex-start; justify-content: center; }
  .help-panel {
    background: var(--bg); max-width: 760px; width: 100%; max-height: 88vh; overflow-y: auto;
    border-radius: 6px; padding: var(--s-8) var(--s-8) var(--s-7); margin-top: var(--s-6); position: relative;
  }
  .help-close {
    position: sticky; top: 0; float: right; width: 44px; height: 44px; border: none; background: var(--stone);
    border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink); margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-3)) 0 var(--s-4);
    display: flex; align-items: center; justify-content: center;
  }
  .help-close:hover { background: var(--line); }
  .help-title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; margin: var(--s-2) 0 var(--s-6); max-width: 26ch; }
  .help-body { font-size: 17px; line-height: 1.72; color: var(--ink-soft); max-width: 66ch; }
  .help-body p { margin: 0 0 var(--s-5); }
  .help-body p:last-child { margin-bottom: 0; }
  .help-footer {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-7);
    padding-top: var(--s-6); border-top: 1px solid var(--line);
  }
  .help-footer .btn-primary { background: var(--deep); color: var(--deep-ink); }
  .help-footer .btn-primary:hover { background: #0f221c; }
  .help-secondary {
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
    border-bottom: 1px solid var(--line); padding-bottom: 2px;
  }
  .help-secondary:hover { border-color: var(--ink); }
  @media (max-width: 640px) {
    .help-modal { padding: 0; }
    .help-panel { max-width: none; max-height: 100vh; height: 100%; margin-top: 0; border-radius: 0; padding: var(--s-6) var(--s-5) var(--s-8); }
    .help-close { margin: 0 0 0 var(--s-4); }
    .help-title { font-size: 24px; }
    .help-body { font-size: 16.5px; }
    .help-footer { flex-direction: column; align-items: stretch; gap: var(--s-4); }
    .help-footer .btn-primary { justify-content: center; min-height: 48px; }
    .help-secondary { text-align: center; border-bottom: none; }
  }

  .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }

  /* ============================================================
     MOBILE — designed as its own surface, not a shrunk desktop.
     ============================================================ */
  @media (max-width: 640px) {
    html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

    /* Header: fixed compact band, brand + burger only */
    .nav { padding-top: 14px; padding-bottom: 14px; min-height: 44px; }
    .brand .mark { font-size: 20px; }
    .burger { width: 44px; height: 44px; margin: -4px -8px -4px 0; }

    /* Hero: designed as its own mobile surface — full-bleed visual on top, then the text. */
    .hero { min-height: 0; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-inner { padding: var(--s-6) 0 var(--s-5); max-width: none; order: 2; }
    .hero-rule { margin-bottom: var(--s-3); }
    .hero .eyebrow { font-size: 12.5px; margin-bottom: var(--s-3); }
    .hero h1 {
      font-size: 34px; line-height: 1.2; max-width: none; margin-bottom: var(--s-4);
    }
    .hero-lede { font-size: 16.5px; line-height: 1.6; max-width: none; margin-bottom: var(--s-5); }
    /* Full-bleed: cancel the .wrap gutter so the image spans edge to edge. */
    .hero-visual {
      order: 1; height: 260px; padding-bottom: 0;
      margin-left: calc(-1 * var(--s-5)); margin-right: calc(-1 * var(--s-5));
    }
    .hero-visual img { height: 260px; object-position: center 42%; }
    /* Edge to edge here, so only the bottom fades — no side gradient. */
    .hero-visual::after {
      background: linear-gradient(to bottom, rgba(14,59,54,0) 40%, rgba(14,59,54,0.8) 80%, #0E3B36 100%);
    }
    .hero-actions { flex-direction: column; align-items: stretch; gap: var(--s-4); }
    .hero .btn-primary {
      justify-content: center; width: 100%; min-height: 48px; font-size: 16px; padding: 0 24px;
    }
    .hero .link-quiet { text-align: center; border-bottom: none; font-size: 14.5px; opacity: .85; }


    /* Section rhythm: deliberate, not desktop values divided in half */
    section { padding: var(--s-7) 0; }
    section.tight { padding: var(--s-6) 0; }
    .section-head { margin-bottom: var(--s-5); }
    .section-head h2 { font-size: 24px; line-height: 1.3; }
    .section-head p { font-size: 16px; }

    /* Problem picker: full-tap rows, roomy but not sprawling */
    .problem { padding: var(--s-5) var(--s-5); font-size: 17px; min-height: 44px; }
    .problem:hover { padding-left: var(--s-5); } /* no hover-dependent shift on touch */

    /* Practice areas: readable body copy at real mobile size */
    .areas-list { column-gap: 0; }
    .area-row { padding: var(--s-4) 0; }
    .area-row h3 { font-size: 18px; }
    .area-row p { font-size: 16px; }

    /* About / lawyers */
    .about-copy p { font-size: 16px; line-height: 1.7; }
    .about-intro { margin-bottom: var(--s-6); }
    .lawyers-grid { gap: var(--s-6); }
    /* Narrower photo so the bio column next to it stays readable at 390px. */
    .lawyer-figure { gap: var(--s-4); }
    .lawyer-figure img { width: 120px; }
    .lawyer-figure h3 { font-size: 19px; }
    .lawyer-figure p { font-size: 15px; }

    /* International box */
    .intl-box h2 { font-size: 22px; }
    .intl-tags span { font-size: 13px; padding: 7px 14px; }

    /* Publications: featured + quiet secondary list, larger body copy */
    .pub-featured h3 { font-size: 22px; }
    .pub-featured p { font-size: 16px; }
    .pub-side h4 { font-size: 17px; }
    .pub-side .cat, .pub-list-items a span.c { font-size: 12.5px; }
    .pub-list-items a { font-size: 16px; min-height: 44px; align-items: center; }
    .pub-list summary { min-height: 44px; display: flex; align-items: center; }

    /* Contact + form: one-thumb friendly */
    .contact-item .v { font-size: 16px; }
    form.cform input, form.cform textarea { font-size: 16px; padding: 14px; min-height: 48px; }
    form.cform textarea { min-height: 96px; }
    form.cform button { width: 100%; min-height: 48px; justify-content: center; padding: 12px 20px; }
    .consent-row { font-size: 14px; }

    /* Article modal: full-bleed sheet instead of a floating card */
    .article-modal { padding: 0; }
    .article-panel { max-width: none; max-height: 100vh; height: 100%; margin-top: 0; border-radius: 0; padding: var(--s-6) var(--s-5) var(--s-8); }
    .article-title { font-size: 24px; }
    .article-body { font-size: 16.5px; }

    /* Footer: distinct vertical groups, not auto-wrapped flex */
    .footer-grid { padding: var(--s-7) 0 var(--s-5); gap: var(--s-6); }
    .footer-brand { font-size: 19px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-2); }

    /* Anchor targets: keep section headings clear of the sticky header */
    section[id], div[id] { scroll-margin-top: 64px; }
  }


/* Breadcrumb is rendered outside any .wrap, so it carries the site gutter itself. */
.breadcrumb {
  font-size: 13px; color: var(--ink-faint);
  max-width: 1180px; margin: 0 auto;
  padding: 14px var(--s-6) 0;
}
@media (max-width: 640px) { .breadcrumb { padding-left: var(--s-5); padding-right: var(--s-5); } }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line); }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: var(--ink-soft); }


/* .simple-hero / .simple-body also carry .wrap — set only the block padding,
   otherwise the shorthand wipes .wrap's gutter and the text hits the edge. */
.simple-hero { padding-top: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.simple-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.2; max-width: 20ch; margin: var(--s-4) 0 var(--s-4); }
.simple-hero p.lede, .simple-hero .lede, .simple-hero .lede p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; margin: 0; }
.simple-body { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.simple-body p { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); max-width: 66ch; margin: 0 0 var(--s-5); }
.simple-body h2 { font-size: 1.4rem; margin: var(--s-7) 0 var(--s-4); }
.simple-body h3 { font-family: "Newsreader", serif; font-size: 1.12rem; color: var(--ink); margin: var(--s-6) 0 var(--s-3); }
.simple-body ul, .simple-body ol { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); max-width: 66ch; margin: 0 0 var(--s-5); padding-left: 1.25em; }
.simple-body li { margin-bottom: var(--s-2); }
.simple-body li > p { margin-bottom: var(--s-2); }

/* Comparison tables. `.table-wrap` is the horizontal scroller — the page body
   itself must never scroll sideways, so the overflow lives on the wrapper. */
.table-wrap { overflow-x: auto; margin: 0 0 var(--s-5); max-width: 100%; -webkit-overflow-scrolling: touch; }
.simple-body table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; line-height: 1.55; }
.simple-body th, .simple-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.simple-body thead th { font-family: "Public Sans", sans-serif; font-weight: 600; color: var(--ink); background: var(--stone); border-bottom: 1px solid var(--line); }
.simple-body tbody td { color: var(--ink-soft); }
.simple-body tbody tr:last-child td { border-bottom: none; }

.areas-foot { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; margin: var(--s-6) 0 0; }
.areas-foot a { color: var(--deep); font-weight: 600; }

.article-disclaimer { font-size: 14.5px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-6); }

/* Standfirst paragraph opening a long-form guide. */
.simple-body p.lede { font-size: 18px; line-height: 1.6; color: var(--ink); max-width: 64ch; margin-bottom: var(--s-6); }

/* Author / reviewer credit — E-E-A-T block at the foot of a guide. */
.author-box { border-left: 2px solid var(--bronze); background: var(--stone); padding: var(--s-4) var(--s-5); margin: var(--s-7) 0 var(--s-5); max-width: 66ch; }
.author-box p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.author-box strong { color: var(--ink); }
.author-box a { color: var(--deep); font-weight: 600; }

.related-links { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.related-links a { color: var(--deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.related-links a:hover { border-color: var(--deep); }
.cta-row { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-6); }
.area-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--s-6); }
@media (max-width: 720px) { .area-grid { grid-template-columns: 1fr; } }
.area-grid a { background: var(--bg); padding: var(--s-6) var(--s-7); text-decoration: none; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-family: "Newsreader", serif; font-size: 19px; }
.area-grid a:hover { background: var(--stone); }
.lawyer-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); margin-top: var(--s-6); max-width: 640px; }
@media (max-width: 640px) { .lawyer-mini-grid { grid-template-columns: 1fr; } }

/* ============ Sticky WhatsApp button (mobile only) ============
   Site palette rather than WhatsApp green, no animation, 52px tap target.
   Hidden until past the hero, and hidden again over the contact section. */
.wa-float { display: none; }
@media (max-width: 640px) {
  .wa-float {
    position: fixed; right: 16px; bottom: 16px; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--deep); color: var(--deep-ink);
    box-shadow: 0 6px 18px rgba(14, 59, 54, 0.28);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
  }
  .wa-float.is-visible { opacity: 1; visibility: visible; }
  .wa-float-icon { width: 26px; height: 26px; }
  /* never float above the open mobile menu or a modal */
  body.panel-open .wa-float { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ============ Article byline + topic-cluster link ============ */
.article-byline {
  font-size: 13.5px; color: var(--ink-faint); margin: 0 0 var(--s-6);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
}
.article-byline a { color: var(--deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.article-byline a:hover { border-color: var(--deep); }
.byline-sep { color: var(--line); }
.article-cluster-link {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-soft);
}
.article-cluster-link a { color: var(--deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.article-cluster-link a:hover { border-color: var(--deep); }

/* ============ Footer: official legal sources ============ */
.footer-sources { border-top: 1px solid rgba(243,241,233,0.14); padding: var(--s-5) 0 0; }
.footer-sources h5 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #8FA098;
  margin: 0 0 var(--s-3); font-family: "Public Sans", sans-serif; font-weight: 600;
}
.footer-sources p { margin: 0; font-size: 13.5px; line-height: 1.9; color: #8FA098; }
.footer-sources a { color: #C9D3CC; text-decoration: none; }
.footer-sources a:hover { color: #fff; text-decoration: underline; }
.footer-sources .src-sep { color: rgba(243,241,233,0.28); margin: 0 8px; }
@media (max-width: 640px) {
  .footer-sources p { line-height: 2.1; }
  .footer-sources .src-sep { margin: 0 6px; }
}

  /* --- C/D/E/F içerik sayfaları ------------------------------------------- */
  .simple-body .intl-links { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 2px; }
  .simple-body .intl-links li { margin: 0; }
  .simple-body .intl-links a { display: inline-block; padding: 6px 0; border-bottom: 1px solid transparent; }
  .simple-body .intl-links a:hover { border-bottom-color: currentColor; }
  .simple-body .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 10px; }
  .simple-body .wa-disclaimer { font-size: .85rem; opacity: .72; margin: 0 0 8px; max-width: 62ch; }

  /* --- Latin dışı alfabeler ------------------------------------------------
     Newsreader ve Public Sans Çince/Arapça/Farsça karakterleri içermez. Bu
     fontlar functions.php'de yalnız ilgili dilde yükleniyordu ama hiçbir
     font-family kuralına bağlanmadığı için kullanılmıyordu: tarayıcı sessizce
     sistem yedeğine düşüyordu. Aşağıdaki kurallar yüklenen fontu fiilen
     uygular. Seçiciler dil köküne bağlı olduğundan TR/EN/DE/RU sayfalarının
     tipografisi hiç değişmez. */
  html[lang="zh-CN"] body,
  html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4,
  html[lang="zh-CN"] .eyebrow, html[lang="zh-CN"] .brand .mark, html[lang="zh-CN"] .brand .name {
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
    font-style: normal;
  }
  html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 {
    font-family: "Noto Serif SC", "Songti SC", ui-serif, Georgia, serif;
  }
  html[lang="ar"] body,
  html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
  html[lang="ar"] .eyebrow, html[lang="ar"] .brand .mark, html[lang="ar"] .brand .name {
    font-family: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    font-style: normal;
  }
  html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 {
    font-family: "Noto Kufi Arabic", "Noto Sans Arabic", ui-sans-serif, sans-serif;
  }
  html[lang="fa"] body,
  html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4,
  html[lang="fa"] .eyebrow, html[lang="fa"] .brand .mark, html[lang="fa"] .brand .name {
    font-family: "Vazirmatn", "Noto Sans Arabic", "Tahoma", ui-sans-serif, system-ui, sans-serif;
    font-style: normal;
  }