:root{
      --bg:#ffffff;
      --ink:#0b0b0c;
      --muted:#6b7280;
      --accent:#e5ff61;
      --border:#e5e7eb;
      --max:1200px;
      --transition-contact:all .5s cubic-bezier(.7,0,.3,1);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; font:16px/1.5 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); --modal-scrollbar-width:0px; min-height:100vh; height:100vh; display:flex; flex-direction:column; overflow:hidden}
    body.modal-open{overflow:hidden; padding-right:var(--modal-scrollbar-width)}
    h1,h2,h3,h6,.title{font-family:"Lora",serif}

    .layout{flex:1 1 auto; display:flex; flex-direction:column; min-height:0}

    /* ÜST: SADE GÖRSEL */
    .hero{position:relative; flex:1 1 45vh; min-height:28vh; overflow:hidden}
    .hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; filter:contrast(1.05) brightness(.95);}

    /* ALT BLOK */
    .lower{background:#fff; border-top:1px solid var(--border); flex:0 0 auto}
    .lower-inner{ margin:0 auto; padding:56px 40px 40px}
    .grid{display:grid; grid-template-columns:1fr 1fr; gap:32px}

    /* Sağ blok içinde çift sütun */
    .info-grid{display:grid; grid-template-columns:1fr 1fr; gap:90px}
    .lead{font-size:clamp(1.2rem,2.0vw,1.4rem); 
      font-weight:500; margin:.25rem 0; font-family:"Lora",serif}
    .lead a{color:inherit; text-decoration:none}
    .muted{color:var(--muted); font-weight:500;}
    .contact-stack{display:flex; flex-direction:column;  gap:32px; min-height:100%}
    .contact-block{display:flex; flex-direction:column}

    .contact-trigger{position:relative; display:inline-flex; align-items:center; justify-content:flex-start; padding:6px 4px; color:inherit; overflow:hidden; cursor:pointer; transition:var(--transition-contact); text-transform:none; letter-spacing:0; width:fit-content; max-width:100%}
    .contact-trigger::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; opacity:.6; transition:var(--transition-contact)}
    .contact-text{position:relative; display:block; line-height:1.05; min-width:0; overflow:hidden}
    .contact-primary,.contact-secondary{display:block; white-space:nowrap; transition:var(--transition-contact); text-decoration:none}
    .contact-primary{transform:translateY(0) rotate(.001deg); transition-delay:-.04s; opacity:1}
    .contact-secondary{position:absolute; top:0; left:0; width:100%; transform:translateY(130%) rotate(6deg); letter-spacing:-.02em; font-size:1em; opacity:0}
    .contact-trigger:hover,
    .contact-trigger:focus-visible{color:#033c83; outline:none}
    .contact-trigger:hover::after,
    .contact-trigger:focus-visible::after{background:#033c83; opacity:1}
    .contact-trigger:hover .contact-primary,
    .contact-trigger:focus-visible .contact-primary{transform:translateY(-135%) rotate(-8deg); transition-delay:0s; opacity:0}
    .contact-trigger:hover .contact-secondary,
    .contact-trigger:focus-visible .contact-secondary{transform:translateY(0) rotate(.001deg); transition-delay:-.05s; opacity:1}

    .title{font-size:clamp(2rem,5vw,3.2rem); line-height:1.05; font-weight:500; margin:0 0 12px}
    .desc{font-size:1.05rem; color:var(--muted); margin:0}

    .col h4{margin:0 0 .75rem; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
    .item{margin:.25rem 0}
    .col .item a:not(.social-link):not(.policy-link),
    .col .links a{color:inherit; text-decoration:underline; text-underline-offset:3px}
    .smalls{font-size:.95rem; color:var(--muted)}

    .social-link,
    .policy-link{color:#0b0b0c; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; font-weight:300}
    .social-link:hover,
    .policy-link:hover{color:#033c83}

    /* Modal */
    .modal[hidden]{display:none}
    .modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px}
    .modal-backdrop{position:absolute; inset:0; background:rgba(11,11,12,.55); backdrop-filter:blur(2px)}
    .modal-dialog{position:relative; max-width:min(720px,90vw); max-height:90vh; width:100%; background:#fff; border-radius:16px; box-shadow:0 18px 45px rgba(15,23,42,.18); padding:28px 32px; display:flex; flex-direction:column; gap:16px}
    .modal-close{position:absolute; top:14px; right:18px; border:none; background:transparent; font-size:1.75rem; line-height:1; color:var(--muted); cursor:pointer}
    .modal-close:hover{color:var(--ink)}
    .modal-scroll{overflow:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:rgba(107,114,128,.4) transparent}
    .modal-scroll::-webkit-scrollbar{width:8px}
    .modal-scroll::-webkit-scrollbar-track{background:transparent}
    .modal-scroll::-webkit-scrollbar-thumb{background:rgba(107,114,128,.35); border-radius:9px}
    .modal-scroll::-webkit-scrollbar-thumb:hover{background:rgba(107,114,128,.5)}
    .modal-body article{display:grid; gap:12px}
    .modal-body h3{margin:0; font-size:1.65rem; line-height:1.2; font-weight:500}
    .modal-body h4{margin:16px 0 4px; font-size:1.05rem; font-weight:600; letter-spacing:.01em; text-transform:uppercase}
    .modal-body p{margin:0; font-size:1rem; color:var(--ink)}
    .modal-body ul{margin:0; padding-left:20px; display:grid; gap:8px}
    .modal-body li{font-size:1rem; color:var(--ink)}
    .modal-body a{color:inherit; text-decoration:underline; text-underline-offset:3px}

    /* ALT ÇUBUK */
    .footer{padding:56px 40px 40px; flex:0 0 auto}
    .footer-inner{margin:0 auto; display:flex; align-items:center; gap:16px; justify-content:space-between}
    .brand{display:flex; align-items:center; gap:12px; min-width:0}
    .brand small{color:var(--muted)}
    .links{display:flex; gap:18px; flex-wrap:wrap}
    .links a{color:var(--muted); text-decoration:none}
    .links a:hover{text-decoration:underline}

    /* RESPONSIVE */
    @media (max-width:900px){
      body{min-height:auto; height:auto; display:block; overflow:auto}
      .layout{display:block}
      .hero{min-height:55vh; flex:none}
      .lower{flex:none}
      .footer{flex:none}
      .grid{grid-template-columns:1fr}
      .info-grid{grid-template-columns:1fr; gap:24px}
    }
    @media (max-width:640px){
      .hero{min-height:25vh}
      .footer-inner{flex-direction:column; align-items:flex-start}
      .modal{padding:16px}
      .modal-dialog{padding:24px}
    }