/* SIXTH PATH // ui_ikon.css :: HÜKÜM TÜRÜ MADALYONLARI (2026-09-25) — js/sim/hukum_tur.js çizer.
   Sahibi: "hükmün özelliğine göre yanında ikonu çıksın ve o ikona basınca … açıklamaları olsun".
   Şık hapının öbür ucunda (kaydırma işaretinin karşısında: 1. şıkta sağ, 2. şıkta row-reverse ile sol)
   bronz madalyonlar: ZARLI · KESİN (nasıl işler) + BAĞLI · GECİKMELİ (sonra ne olur). Hap boyu
   değişmez: madalyon 20 px, dokunma alanı negatif kenar boşluğuyla büyür (yerleşim oynamaz).
   Dokununca parşömen pencere (#ht-pen, body çocuğu, position:fixed).
   KURAL (Android WebView): sonsuz animasyon, kalıcı will-change, mask, blend, backdrop-filter, filter YOK.
   Pencere girişi tek atımlık 160 ms (opacity + translate), fill-mode backwards: bitince stil sabit,
   öğe katmanda kalmaz. İlk görüş nabzı iki atım, sonra sınıf kalkar. */

.ht-grup { display: none; }

  body.kartli.mapless #dc-options .dc-opt .ht-grup {
    display: inline-flex; flex: none; align-items: center; position: relative;
    /* dokunma alanı: hap boyunca ve yanlara 6 px — negatif kenar boşluğu yerleşimi korur */
    padding: 10px 6px; margin: -10px -6px; cursor: help;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }

  body.kartli .ht-ik {
    --ht-kenar: var(--kt-deep, #8c6a1e);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
    border: 1px solid var(--ht-kenar);
    background: linear-gradient(160deg, #fdf5dc 0%, color-mix(in srgb, var(--kt-gold, #c5a059) 55%, #fff4d2) 45%, var(--kt-gold, #c5a059) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 251, 235, .85), inset 0 -1px 1px rgba(90, 62, 12, .35),
      0 1px 1px rgba(50, 32, 8, .35), 0 0 0 1.5px color-mix(in srgb, var(--kt-pale, #f3e6c6) 85%, #fff);
    color: var(--kt-ink, #3a2c12); font-style: normal;
  }
  body.kartli .ht-ik + .ht-ik { margin-left: -4px; }
  body.kartli .ht-ik svg { width: 14px; height: 14px; stroke: currentColor; fill: none; display: block; }
  body.kartli .ht-ik svg .d { fill: currentColor; stroke: none; }
  /* zar kademesi yalnız kenarı boyar (hap çerçevesinin yeşil/altın/kehribar dili) */
  body.kartli .ht-ik.ht-t-hi { --ht-kenar: #3f7f52; }
  body.kartli .ht-ik.ht-t-lo { --ht-kenar: #a4502a; }
  body.kartli #dc-options .ht-grup.ht-acik .ht-ik {
    box-shadow: inset 0 1px 0 rgba(255, 251, 235, .85), inset 0 -1px 1px rgba(90, 62, 12, .35),
      0 0 0 1.5px var(--kt-pale, #f3e6c6), 0 0 0 3px color-mix(in srgb, var(--kt-deep, #8c6a1e) 70%, transparent);
  }

  /* SIĞDIRMA (hukumTurSigdir): yazı öbek yüzünden sarıyorsa önce sıkı, sonra hapın üst kenarına */
  body.kartli.mapless #dc-options .dc-opt .ht-grup.ht-dar { margin-left: -12px; }
  body.kartli.mapless #dc-options:not(.four) .dc-opt:nth-child(2) .ht-grup.ht-dar { margin-left: -6px; margin-right: -12px; }
  body.kartli #dc-options .ht-grup.ht-dar .ht-ik { width: 18px; height: 18px; }
  body.kartli #dc-options .ht-grup.ht-dar .ht-ik + .ht-ik { margin-left: -7px; }
  body.kartli #dc-options .ht-grup.ht-dar .ht-ik svg { width: 12px; height: 12px; }
  body.kartli.mapless #dc-options .dc-opt .ht-grup.ht-kose {
    position: absolute; top: -9px; right: 16px; left: auto; margin: 0; padding: 6px 4px; z-index: 2; }
  body.kartli.mapless #dc-options:not(.four) .dc-opt:nth-child(2) .ht-grup.ht-kose { right: auto; left: 16px; }
  body.kartli #dc-options .ht-grup.ht-kose .ht-ik { width: 18px; height: 18px; }
  body.kartli #dc-options .ht-grup.ht-kose .ht-ik svg { width: 12px; height: 12px; }

  /* ORTA KORUMASI (hukum_tur.js ortaKoru, b1329): öbek hapın ortasına yaklaşırsa madalyonlar sıkı bindirilir */
  body.kartli #dc-options .ht-grup.ht-sik .ht-ik + .ht-ik { margin-left: -10px; }

  /* ilk görüş: iki atımlık hafif nabız, sonra sınıf kalkar (hukumTurIpucu) */
  body.kartli #dc-options.ht-ilk .ht-grup { animation: htNabiz .6s ease-in-out .9s 2 backwards; }
  @keyframes htNabiz { 50% { transform: scale(1.18); } }
  @media (prefers-reduced-motion: reduce) { body.kartli #dc-options.ht-ilk .ht-grup { animation: none; } }

  /* ---- PENCERE ---------------------------------------------------------------------- */
  #ht-pen {
    position: fixed; z-index: 9400; box-sizing: border-box;
    width: max-content; max-width: min(300px, calc(calc(100 * var(--vw)) - 24px));
    padding: 9px 12px 10px; border-radius: 8px;
    border: 1.5px solid var(--kt-deep, #8c6a1e);
    background: linear-gradient(176deg, #fbf4df 0%, #f1e3bf 60%, #e9d6a8 100%);
    box-shadow: inset 0 0 0 2px #fdf8e8, inset 0 0 0 3px color-mix(in srgb, var(--kt-deep, #8c6a1e) 40%, transparent),
      0 2px 0 rgba(90, 64, 20, .25), 0 8px 18px rgba(30, 18, 4, .42);
    color: var(--pr-murekkep, #2d220f); text-align: left;
    /* dokunuşları geçirir: pencere kartın üstünde dursa da kaydırma oradan başlayabilir; ilk dokunuş kapatır */
    pointer-events: none;
    animation: htGir .16s ease-out backwards;
  }
  #ht-pen.alt { animation-name: htGirAlt; }
  @keyframes htGir { from { opacity: 0; transform: translateY(5px); } }
  @keyframes htGirAlt { from { opacity: 0; transform: translateY(-5px); } }
  @media (prefers-reduced-motion: reduce) { #ht-pen { animation-duration: .01s; } }
  #ht-pen .ht-sat { display: flex; align-items: flex-start; gap: 9px; }
  #ht-pen .ht-sat + .ht-sat { margin-top: 7px; padding-top: 7px; border-top: 1px dotted color-mix(in srgb, var(--kt-deep, #8c6a1e) 60%, transparent); }
  #ht-pen .ht-ik { width: 24px; height: 24px; margin-top: 1px; }
  #ht-pen .ht-ik svg { width: 16px; height: 16px; }
  #ht-pen .ht-yazi { display: flex; flex-direction: column; min-width: 0; }
  #ht-pen .ht-yazi b { font: 700 12.5px/1.2 var(--pr-display, 'Cinzel', Georgia, serif); letter-spacing: .08em; color: var(--kt-title, #5a4210); }
  #ht-pen .ht-yazi em { font: italic 500 14.5px/1.28 var(--pr-metin, 'Alegreya', Georgia, serif); color: var(--pr-murekkep, #2d220f); margin-top: 2px; }
  #ht-pen .ht-yazi small { font: 700 11px/1.2 var(--pr-display, 'Cinzel', Georgia, serif); letter-spacing: .07em; color: #6b4f1a; margin-top: 4px; }
  #ht-pen .ht-yazi small.ht-t-hi { color: #2c6236; }
  #ht-pen .ht-yazi small.ht-t-lo { color: #93361f; }
  /* ok: pencerenin öbeğe bakan kenarında, öbeğin ortasında (--ht-ok) */
  #ht-pen .ht-ok {
    position: absolute; left: var(--ht-ok, 50%); width: 11px; height: 11px; margin-left: -6px;
    background: #ecdaae; border: 1.5px solid var(--kt-deep, #8c6a1e); transform: rotate(45deg);
  }
  #ht-pen.ust .ht-ok { bottom: -7px; border-top: 0; border-left: 0; }
  #ht-pen.alt .ht-ok { top: -7px; border-bottom: 0; border-right: 0; background: #fbf4df; }