/* Tek Çatı İşletme Programları sayfası (Akan, 2026-10-11: "daha güzel, çafçaflı yap; hero'yu, yandakini ve tüm sayfasını").
   İki sayfa yükler: /hizmetler/tek-cati-isletme-programlari ve /hizmetler/esnaf-cozumleri (2026-10-11 akşam, aynı dil); üretici scripts/hizmet-sayfalari.mjs tekCatiSayfasi. Hareket: tek-cati.js.
   Hareketler yalnız transform / opacity / stroke-dashoffset; hareket azaltmada hepsi kapalı (dosyanın sonu). */

/* Giriş zemini: dört rengin soluk ışığı */
.tc-sayfa .hero{background:
  radial-gradient(720px 440px at 92% 8%,rgba(66,133,244,.15),transparent 70%),
  radial-gradient(520px 380px at 74% 96%,rgba(52,168,83,.10),transparent 70%),
  radial-gradient(460px 340px at 2% 2%,rgba(251,188,4,.11),transparent 70%),
  radial-gradient(420px 320px at 30% 100%,rgba(234,67,53,.06),transparent 70%)}

/* EV: dört renkli çatı + altı oda. Odanın üstüne gelme li'de: kutunun kendisinde olunca fare alt kenardayken oda titriyordu (ölçüldü: 1,2 sn'de 12 kez) */
.tc-vis{max-width:500px}
.tc-cati{position:relative;margin:0 -4% -1px}
.tc-cati-svg,.tc-son-cati{display:block;width:100%;height:auto;overflow:visible}
.tc-baca{fill:#fff;stroke:#dadce0;stroke-width:2}
.tc-cati-z{fill:#fff}
.tc-cz{fill:none;stroke:var(--r);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.tc-cati-svg .tc-cz{animation:tcCiz .45s var(--ease) backwards;animation-delay:calc(.15s + var(--s) * .2s)}
@keyframes tcCiz{from{stroke-dashoffset:1;opacity:0}}
.tc-tepe{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;animation:tcBelir .5s var(--ease) .85s backwards}
.tc-tepe b{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums;min-width:1.15em;text-align:right}
.tc-tepe span{font-size:13.5px;line-height:1.3;color:var(--ink-2)}
@keyframes tcBelir{from{opacity:0}}
.tc-sinyal{position:absolute;left:75%;top:22%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid #4285f4;opacity:0;pointer-events:none}
.tc-gor .tc-sinyal{animation:tcSinyal 3.6s ease-out 1.6s infinite}
.tc-gor .tc-sinyal-2{animation-delay:2.8s}
@keyframes tcSinyal{0%{transform:scale(.3);opacity:.75}65%,100%{transform:scale(1.8);opacity:0}}

.tc-odalar{position:relative;list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:var(--paper);border:1px solid var(--rule);border-top:0;border-radius:0 0 22px 22px;box-shadow:var(--lift)}
@media (min-width:480px){.tc-odalar{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px}}
.tc-odalar li{animation:tcGel .55s var(--spring) backwards;animation-delay:calc(.95s + var(--i) * 70ms)}
@keyframes tcGel{from{opacity:0;transform:translateY(14px) scale(.94)}}
.tc-oda{position:relative;display:flex;flex-direction:column;height:100%;min-height:112px;padding:12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--oc) 24%,#fff);background:color-mix(in srgb,var(--oc) 6%,#fff);color:var(--ink);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s}
.tc-oi{position:relative;width:38px;height:38px;margin-bottom:10px;border-radius:11px;display:grid;place-items:center;background:var(--oc);color:#fff;transition:transform .35s var(--spring)}
.tc-oi svg{width:20px;height:20px}
.tc-oi::after{content:"";position:absolute;inset:-5px;border-radius:15px;border:2px solid var(--oc);opacity:0;pointer-events:none}
.tc-gor .tc-oi::after{animation:tcIsik 7.2s ease-out infinite;animation-delay:calc(2s + var(--i) * 1.2s)}
@keyframes tcIsik{0%{opacity:.7;transform:scale(.86)}11%,100%{opacity:0;transform:scale(1.3)}}
.tc-oda b{font-size:14.5px;line-height:1.25;font-weight:500}
.tc-oda small{margin-top:3px;font-size:12.5px;color:var(--ink-2)}
.tc-oda::after{content:"↓";position:absolute;right:12px;top:10px;font-size:15px;color:var(--oc);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .25s var(--ease)}
.tc-odalar li:hover>.tc-oda,.tc-oda:focus-visible{transform:translateY(-4px);background:color-mix(in srgb,var(--oc) 11%,#fff);box-shadow:0 10px 22px color-mix(in srgb,var(--oc) 22%,transparent)}
.tc-odalar li:hover>.tc-oda .tc-oi,.tc-oda:focus-visible .tc-oi{transform:rotate(-8deg) scale(1.08)}
.tc-odalar li:hover>.tc-oda::after,.tc-oda:focus-visible::after{opacity:1;transform:none}
.tc-odalar li>.tc-oda:active{transform:translateY(-1px) scale(.98)}
.tc-oda:focus-visible{outline:2px solid var(--oc);outline-offset:2px;border-radius:14px}
.tc-zemin{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13.5px;line-height:1.4;color:var(--ink-2);text-align:center}
.tc-zemin svg{flex:none;width:18px;height:18px;color:var(--blue)}
@media (max-width:359px){.tc-tepe b{font-size:30px}.tc-tepe span{font-size:12px}.tc-tepe{gap:8px}}
@media (min-width:360px) and (max-width:479px){.tc-tepe b{font-size:36px}.tc-tepe span{font-size:13px}}

/* HEDEF (Nokta Atışı Esnaf Çözümleri girişi, 2026-10-11): dört renkli hedef tahtası kendini çizer, ok tam ortaya saplanır, ortadan sinyal yayılır.
   Sayfanın adının resmi; Tek Çatı'daki çatının karşılığı. Çizim hareketleri yalnız girişteki hedefte (.nh-hedef); son çağrıdaki kopya durağan. */
.nh-kutu{background:var(--paper);border:1px solid var(--rule);border-radius:22px;box-shadow:var(--lift)}
.nh-ust{display:flex;align-items:center;gap:22px;padding:26px 26px 10px}
.nh-hedef{position:relative;flex:none;width:clamp(116px,40%,196px)}
.nh-hedef svg,.nh-son svg{display:block;width:100%;height:auto;overflow:visible}
.nh-h{fill:none;stroke:var(--r);stroke-width:14;stroke-dasharray:1;stroke-dashoffset:0}
.nh-goz{fill:#34a853}
.nh-ok path{fill:none;stroke:#202124;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.nh-ok .nh-tuy{fill:#ea4335;stroke-width:3}
.nh-hedef .nh-h{transform:rotate(-90deg);transform-origin:100px 100px;animation:tcCiz .5s var(--ease) backwards;animation-delay:calc(.15s + var(--s) * .18s)}
.nh-hedef .nh-goz{transform-box:fill-box;transform-origin:center;animation:nhGoz .4s var(--spring) .7s backwards}
@keyframes nhGoz{from{transform:scale(0)}}
.nh-hedef .nh-ok{animation:nhOk .3s cubic-bezier(.55,0,.9,.45) 1.05s backwards}
@keyframes nhOk{from{transform:translate(64px,-64px);opacity:0}}
.nh-hedef .tc-sinyal{left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-color:#34a853}
.nh-sayi{display:flex;align-items:center;gap:10px;min-width:0;animation:tcBelir .5s var(--ease) .85s backwards}
.nh-sayi b{font-size:52px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--c);font-variant-numeric:tabular-nums;min-width:1.1em;text-align:right}
.nh-sayi span{font-size:14px;line-height:1.35;color:var(--ink-2)}
@media (min-width:480px){.nh-sayi b{font-size:62px}.nh-sayi span{font-size:15px}}
.nh .tc-odalar{border:0;background:none;box-shadow:none}
.nh-son{max-width:220px}
/* Üç odalı ev: telefonda alt alta satır (2 + 1 dizilmesin), 480 px'ten itibaren üç sütun */
.tc-odalar[data-n="3"]{grid-template-columns:1fr}
.tc-odalar[data-n="3"] .tc-oda{flex-direction:row;align-items:center;gap:12px;min-height:64px}
.tc-odalar[data-n="3"] .tc-oi{margin-bottom:0}
.tc-odalar[data-n="3"] .tc-oda small{margin:0 0 0 auto;padding-right:22px;white-space:nowrap}
@media (min-width:480px){
  .tc-odalar[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tc-odalar[data-n="3"] .tc-oda{flex-direction:column;align-items:stretch;gap:0;min-height:112px}
  .tc-odalar[data-n="3"] .tc-oi{margin-bottom:10px}
  .tc-odalar[data-n="3"] .tc-oda small{margin:3px 0 0;padding:0}
}
@media (max-width:359px){.nh-sayi b{font-size:40px}.nh-sayi span{font-size:13px}.nh-ust{gap:14px;padding:18px 16px 6px}}
/* Kural takvimi şeridi (Yasal uyum bölümünün başı): tarih, durum ve kural; renk tek başına anlam taşımaz, durum yazıyla da yazar */
.tk{margin:0 0 22px;padding:16px 18px;border:1px solid var(--rule);border-radius:18px;background:var(--paper)}
.tk-b{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:12px}
.tk-b b{font-size:15.5px;font-weight:500}
.tk-b small{font-size:13px;color:var(--ink-2)}
.tk ol{list-style:none;margin:0;padding:0;display:grid;gap:12px 24px;grid-template-columns:1fr}
@media (min-width:640px){.tk ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tk ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tk li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:2px 10px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.tk li i{grid-row:1 / 3;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--tr)}
.tk time{font-weight:500;color:var(--ink);white-space:nowrap}
.tk time em{margin-left:8px;font-style:normal;font-weight:400;font-size:12.5px;color:var(--tr-y)}
.tk li.ok{--tr:#34a853;--tr-y:#137333}
.tk li.uyari{--tr:#fbbc04;--tr-y:#8a4b00}
.tk li.bilgi{--tr:#4285f4;--tr-y:#0b57d0}

/* BÖLÜM ÇUBUĞU: geniş ekranda menünün altına yapışır, seçili bölümde kapsül kayar */
.tc-nav-s{display:none}
@media (min-width:1024px){
  /* Sarmalayıcı menünün altına yapışır ve altından geçen kartları örter (ölçüldü: yalnız kapsül yapışınca kart başlıkları iki yanından taşıyordu) */
  .tc-nav-s{display:block;position:sticky;top:72px;z-index:5;margin:0 -16px;padding:16px 16px 10px;background:var(--tc-zemin,#fff);box-shadow:0 -72px 0 0 var(--tc-zemin,#fff)}
  /* Yukarı uzanan zemin, yüzen menünün arkasından geçen kartları da örter; yerindeyken başlığın son satırını kapatmasın diye başlık üstte */
  .tc-sayfa #programlar .sh{position:relative;z-index:6}
  .tc-nav-s::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(var(--tc-zemin,#fff),transparent);pointer-events:none}
  .tc-nav{position:relative;display:flex;width:fit-content;margin:0 auto;padding:5px;gap:2px;background:var(--paper);border:1px solid var(--rule);border-radius:999px;box-shadow:var(--card)}
}
.tc-nav a{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .2s,background-color .2s}
.tc-nav a i{width:8px;height:8px;border-radius:50%;background:var(--oc)}
.tc-nav a small{font-size:12px;color:var(--ink-2)}
.tc-nav a:hover{background:rgba(60,64,67,.06)}
.tc-nav a[aria-current]{color:var(--ink);background:none}
.tc-nav a:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.tc-nav-kay{position:absolute;left:0;top:5px;width:0;height:44px;border-radius:999px;background:color-mix(in srgb,var(--kc,#0b57d0) 15%,#fff);opacity:0;pointer-events:none;transition:transform .22s ease-out,width .22s ease-out,background-color .22s,opacity .2s}

/* BÖLÜM BAŞLIĞI: kendi renginde simge kutusu + program sayısı */
.tc-b{margin-top:56px;scroll-margin-top:96px}
@media (min-width:1024px){.tc-b{scroll-margin-top:178px}}
.tc-nav-s + .tc-b{margin-top:26px}
.tc-bh{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.tc-bh::after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:3px;border-radius:3px;background:var(--bc)}
.tc-bh>div{flex:1 1 calc(100% - 60px);min-width:0}
.tc-bi{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--bc);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--bc) 26%,transparent)}
.tc-bi svg{width:24px;height:24px}
.tc-bh h3{font-size:21px;line-height:1.25;font-weight:500;letter-spacing:-.01em}
.tc-bh p{margin-top:3px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tc-bn{flex:none;display:inline-flex;align-items:baseline;gap:6px;margin-left:60px;padding:5px 13px;border-radius:999px;background:color-mix(in srgb,var(--bc) 9%,#fff);font-size:13.5px;color:var(--ink-2)}
.tc-bn b{font-size:19px;line-height:1.2;font-weight:600;color:var(--bc)}
@media (min-width:640px){.tc-bi{width:52px;height:52px;border-radius:16px}.tc-bi svg{width:26px;height:26px}.tc-bh h3{font-size:24px}.tc-bh p{font-size:15px}.tc-bh>div{flex:1}.tc-bn{margin-left:0}}

/* KARTLAR: dolu renkli simge, imleci izleyen kendi renginde ışık, sorun cümlesi kutuda */
.tc-sayfa .fk{position:relative}
.tc-sayfa .fk.glow{background-color:var(--paper);background-image:radial-gradient(320px circle at var(--gx) var(--gy),color-mix(in srgb,var(--fc) calc(var(--ga) * 13%),transparent),transparent 64%);--glow:var(--fc)}
.tc-sayfa .fk .fk-i{background:var(--fc);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--fc) 24%,transparent);transition:transform .35s var(--spring)}
.tc-sayfa .fk:hover .fk-i{transform:translateY(-2px)}
.tc-sayfa .fk:hover{border-color:color-mix(in srgb,var(--fc) 30%,var(--rule))}
.tc-sayfa .ec>p.ec-s{padding:10px 12px;border-radius:12px;background:var(--surface)}
.tc-sayfa .ec-f b{color:var(--fc)}

/* SON ÇAĞRI: küçük ev + iki düğme */
.tc-son{display:grid;gap:28px;align-items:center;padding:30px 22px;border-radius:28px;background:var(--blue-tint);border:1px solid var(--blue-soft)}
@media (min-width:900px){.tc-son{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px;padding:48px 52px}}
.tc-son h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-.02em;font-weight:500;color:var(--blue-ink)}
.tc-son p{margin-top:12px;max-width:56ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.tc-son-dg{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tc-son-g{width:100%;max-width:280px;margin:0 auto}
.tc-son .tc-cati-z,.tc-son .tc-baca{fill:#fff}
.tc-son-o{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:-1px 4% 0;padding:10px;background:var(--paper);border:1px solid var(--blue-soft);border-top:0;border-radius:0 0 16px 16px}
.tc-son-o span{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;background:var(--oc);color:#fff;transition:transform .35s var(--spring)}
.tc-son-o svg{width:46%;height:46%}
.tc-son:hover .tc-son-o span{transform:translateY(-2px)}
.tc-son:hover .tc-son-o span:nth-child(even){transform:translateY(2px)}

@media (prefers-reduced-motion:reduce){
  .nh-hedef .nh-h,.nh-hedef .nh-goz,.nh-hedef .nh-ok,.nh-sayi,.tc-cati-svg .tc-cz,.tc-tepe,.tc-odalar li,.tc-gor .tc-sinyal,.tc-gor .tc-oi::after{animation:none}
  .tc-oda,.tc-oi,.tc-oda::after,.tc-nav-kay,.tc-son-o span,.tc-sayfa .fk .fk-i{transition:none}
  .tc-odalar li:hover>.tc-oda,.tc-oda:focus-visible,.tc-odalar li>.tc-oda:active,.tc-odalar li:hover>.tc-oda .tc-oi,.tc-oda:focus-visible .tc-oi,.tc-sayfa .fk:hover .fk-i,.tc-son:hover .tc-son-o span{transform:none}
}